For our story we have to make sure our contact us page is accessible. We are supposed to make sure the tab order focus for each input in order for information to be read out on the screenreader. However, we have certain input fields that we don't want the user to be able to edit, however we still want them to be able to have the screen reader capture it. What is the best practice for this issue? What is the approach best to follow to solve this issue?
I found this example online and tried exploring the implementation of this fix Tab on disabled input. It is a css style approach to mitigating the problem but doesn't involve the disabled property.
<form [formGroup]="contactUsForm">
<div class="container pt-4">
<!-- Instructions -->
<div name="instructions-row" class="row">
<div tabindex="0" name="form-instructions" id="form-instructions" class="col justify-content-center">
Please fill out the form and click the send button to submit your message. If your question or comment is
about a specific account, enter the account name and account number in the body of the message.
</div>
</div>
<!-- Basic Info -->
<div name="basic-info-row" class="row">
<div class="col-xl-6 justify-content-center">
<!-- From -->
<div class="input-container">
<label for="from-input" class="liberty-text-secondary">
From
<span *ngIf="contactUsForm.get('from').hasError('required')" class="text-danger">
*
</span>
</label>
<input role="textbox" id="from-input" class="liberty-input col-12" formControlName="from" />
</div>
<!-- Account Number -->
<div class="input-container">
<label for="account-number-input" class="liberty-text-secondary">
Account Number
<span *ngIf="contactUsForm.get('accountNumber').hasError('required')" class="text-danger">
*
</span>
</label>
<input tabindex="0" role="textbox" id="account-number-input" class="liberty-input col-lg-4 col-md-12" formControlName="accountNumber" />
</div>
<!-- User ID -->
<div class="input-container">
<label for="user-id-input" class="liberty-text-secondary">
User ID
<span *ngIf="contactUsForm.get('userId').hasError('required')" class="text-danger">
*
</span>
</label>
<input tabindex="0" role="textbox" id="user-id-input" class="liberty-input col-lg-10 col-md-12" formControlName="userId" />
</div>
<!-- Name -->
<div class="input-container">
<label for="name-input" class="liberty-text-secondary">
Name
<span *ngIf="contactUsForm.get('name').hasError('required')" class="text-danger">
*
</span>
</label>
<input tabindex="0" role="textbox" id="name-input" class="liberty-input col-lg-10 col-md-12" formControlName="name" />
</div>
<!-- Phone Number -->
<div class="input-container">
<label for="phone-number-input" class="liberty-text-secondary">
Phone Number
<span *ngIf="contactUsForm.get('phoneNumber').hasError('required')" class="text-danger">
*
</span>
</label>
<input tabindex="0" role="textbox" id="phone-number-input" class="liberty-input col-lg-4 col-md-12" formControlName="phoneNumber" />
<span *ngIf="contactUsForm.get('phoneNumber').hasError('pattern')" class="text-danger">
Please enter a valid phone number.
</span>
</div>
<!-- Subject -->
<div class="input-container">
<label for="subject-input" class="liberty-text-secondary">
Subject
<span *ngIf="contactUsForm.get('subject').hasError('required')" class="text-danger">
*
</span>
</label>
<select tabindex="0" id="subject-input" class="liberty-select col-lg-11 col-md-12" formControlName="subject">
<option *ngIf="!contactUsForm.value.subject" [value]="null" selected disabled></option>
<option *ngFor="let subject of subjects" [value]="subject">{{subject}}</option>
</select>
</div>
</div>
</div>
<!-- Comments -->
<div class="row">
<div class="col-xl-10 justify-content-center">
<div class="input-container">
<label for="comments-input" class="liberty-text-secondary">
Comments
<span *ngIf="contactUsForm.get('comments').hasError('required')" class="text-danger">
*
</span>
</label>
<textarea tabindex="0" role="textbox" id="comments-input" class="liberty-text-area" formControlName="comments"></textarea>
</div>
</div>
</div>
<!-- Submit Button -->
<div class="row py-4">
<div class="col container">
<div class="row">
<button tabindex="0" role="button" id="submit-button" class="col-xl-2 col-3 btn liberty-button mx-3" [disabled]="contactUsForm.invalid"
(click)="onSubmitClick()">
Send
</button>
<button tabindex="0" role="button" id="cancel-button" class="col-xl-2 col-3 btn liberty-button mx-3" routerLink="/home">
Cancel
</button>
<span class="col-xl-8 col-6"></span>
</div>
</div>
</div>
</div>
</form>
The above code tabs through the enabled inputs only.
Use readonly attribute or css pointer-events none to make the input disabled. Use ngClass to add class dynamically.
component.css
.disabled {
pointer-events: none;
opacity: 0.5;
}
component.html
<form [formGroup]="form" (ngSubmit)="onSubmit()">
<input type="text" formControlName="userName">
<input type="text" formControlName="password">
<input [ngClass]="{'disabled':!form.valid}" readonly type="button" value="submit" >
</form>
Example
Note: If you use pointer events none with input type button make sure to add readonly attribute otherwise it will be submit able through enter button
Related
I Made a switch to toggle between 2 contact forms. Everytime when using the button, the second form jumps.
Take a look here:
https://imgur.com/G4kGqjl
Here is my js:
$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
$("#mail-form, #phone-form").fadeToggle();
});
And here my HTML:
<div class="div_switch">
<label>
<h1 class="switch_text">Email</h1>
</label>
<label class="switch">
<input name="checkbox" type="checkbox" value="checkbox">
<span class="slider round"></span>
</label>
<label>
<h1 class="switch_text">Rückruf</h1>
</label>
</div>
<div id="mail-form" class="mail-form">
<form class="" action="index.html" method="post">
<div class="contact-selector">
</div>
<div class="form-row">
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-signature"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
</div>
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label for="exampleFormControlTextarea1"></label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Deine Nachricht..."></textarea>
</div>
</div>
<div class="email-btn-holder">
<button type="submit" class="reshape_btn email-submit">Senden</button>
</div>
</form>
</div>
<div id="phone-form" class="phone-form">
<form class="" action="index.html" method="post">
<div class="contact-selector">
</div>
<div class="form-row">
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-signature"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
</div>
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
</div>
</div>
<div class="email-btn-holder">
<button type="submit" class="reshape_btn email-submit">Senden <span><i class="fas fa-arrow-right"></i></span></button>
</div>
</form>
</div>
I tried a couple of things. Setting the display of the parent div to absolute and some other css stuff i found on the webs but cant remember. But nothing helped.
I would really appreciate some help.
Thanks in advance!!
You should separate both forms and set a callback on your fadetoggle function (there's a completion event, use that to your favor). Try something like:
$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
if($("#mail-form").is(':visible')){
$("#mail-form").fadeToggle(function(){
$("#phone-form").fadeToggle();
});
} else {
$("#phone-form").fadeToggle(function(){
$("#mail-form").fadeToggle();
});
}
});
Also, check out the api:
http://api.jquery.com/fadetoggle/
I would go with #Mauricio Cárdenas' answer, but if you absolutly must have them fade at the same time, you can do this:
<style>
#parentDiv{position:relative}
#mail-form, #phone-form{position:absolute;top:0}
</style>
<div ID="parentDiv">
<div id="mail-form" class="mail-form">
//Your form code
</div>
<div id="phone-form" class="phone-form">
//Your form code
</div>
</div>
This sets both forms to absolute and places them at the same position. Adding the parent div set to relative assures the forms position won't be set by the body.
I have this modal which dont have form tag. But i want to validate all the elements inside before user proceed with clicking on any of these two buttons.
<div id="modal-invoice-member" class="modal fade" data-backdrop="static">
<!-- Modal Dialog -->
<div class="modal-dialog">
<!-- Modal Content -->
<div class="modal-content">
<!-- Modal Body -->
<div class="modal-body remove-padding">
<!-- Modal Tabs -->
<div class="block-tabs block-themed">
<div class="block-options">
×
</div>
<ul class="nav nav-tabs" data-toggle="tabs">
<li class="active"><i class="gi gi-user"></i> Member Details</li>
</ul>
<div class="tab-content">
<!-- Account Tab Content -->
<div class="tab-pane active" id="modal-invoice-member-data">
<div class="form-group">
<label class="control-label col-md-3">Name<span style="color:red">*</span></label>
<div class="col-md-8" >
<input type="text" style="text-transform: capitalize;" name="name" ng-model="user.name" class="form-control input" placeholder="First... Last... Middle..." required>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" >Contact<span style="color:red">*</span></label>
<div class="col-md-4">
<div class="input-group ">
<input type="text" ng-pattern="/^[7-9][0-9]{9}$/" style="text-transform: capitalize;" name="mobile" ng-model="user.mobile" class="form-control digits" maxlength="10" placeholder="Mobile" required>
</div>
</div>
<div class="col-md-4" >
<div class="input-group ">
<input type="text" name="email" ng-model="user.email" class="form-control input" placeholder="Email" required>
</div>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3">Gender<span style="color:red">*</span></label>
<div class="col-md-9" style="top:5px;">
<label class="col-md-3" for="gender">
<input type="radio" id="gender" name="gender" ng-model="user.gender" value="F" required=""> Female
</label>
<label class="col-md-3" for="gender">
<input type="radio" id="gender" name="gender" ng-model="user.gender" value="M" ng-checked="true" required=""> Male
</label>
<label class="col-md-3" for="gender">
<input type="radio" id="gender" name="gender" ng-model="user.gender" value="O" required=""> Other
</label>
</div>
</div>
</div>
<!-- END Account Tab Content -->
</div>
</div>
<!-- END Modal Tabs -->
</div>
<!-- END Modal Body -->
<!-- Modal footer -->
<div class="modal-footer">
<button class="btn btn-success" type="submit" ng-click="saveMember()"><i class="fa fa-check"></i> Save</button>
<button class="btn btn-warning" data-dismiss="modal" ng-click="addItem()"><i class="fa fa-plus"></i> Add Item</button>
</div>
<!-- END Modal footer -->
</div>
<!-- END Modal Content -->
</div>
<!-- END Modal Dialog -->
I want to all fields to get filled before user click on any buttons. Border color should get red when there is an empty element .
New idea also welcome .
Thank you
Below is the attached picture of the form constructor. As you can see it has {{service.name}} in it instead o fthe name itself.
I have a form inside that I have two ng-repeats with custom filters on it and inside that I have an input field. I am trying to have a unique name for my input field by adding an index or by using a field from the html response. Regardless of that, when I have name="{{customitem.name}}" or name="{{$index}}" the form generates a constructor with {{customitem}} or {{$index}} instead of the value it self. Also this form turned on and off using ng-if.
<form name="selectServiceForm">
<div data-ng-show="showAddServices">
<section class="content-header">
<div class="row">
<div class="col-lg-5 col-sm-5">
<h1>
Services
<small>Add or Modify Services</small>
</h1>
</div>
<div class="col-lg-7 col-sm-7 text-right btn-container">
<button type="button" class="btn btn-primary btn-sm" data-ng-disabled="selectServiceForm.$invalid" data-ng-click="selectServiceForm.$valid && save(true)">
<i class=" fa fa-save"></i>
<span class="indent-xs">Save</span>
</button>
<button type="button" class="btn btn-primary btn-sm" data-ng-click="backToAddServices()">
<i class=" fa fa-arrow-circle-left"></i>
<span class="indent-xs">BACK</span>
</button>
</div>
</div>
</section>
<section class="content group-container">
<div class="row">
<div class="col-lg-6">
<div class="form-group">
<label for="">Industry<sup style="color: red">*</sup></label>
<select class="form-control" id="select1" name="" data-ng-model="selectedIndustry" data-ng-change="onChangeIndustry(selectedIndustry)"
data-ng-options="industry.CategoryName for industry in Industry">
<option value="">Select Industry</option>
</select>
</div>
<div data-ng-show="isSecondLevelCategory">
<div class="form-group">
<label for="">
Category<sup style="color: red">*</sup>
</label>
<select class="form-control" id="selectCategory" name="" data-ng-model="selectedService" data-ng-change="showServices(selectedService)"
data-ng-options="service.CategoryName for service in ServiceTypes">
<option value="">Select Category</option>
</select>
</div>
</div>
</div>
</div>
<hr />
<div class="selectServ">
<div class="pad20B p-relative">
<div data-ng-repeat="item in innerCategoryList | orderBy: 'SortOrder'" class="">
<div class="form-row pad10B mrg0A pad0B mrg5T">
<label>
<input class="wauto float-left mrg5R" type="checkbox" data-ng-model="item.checked" data-ng-checked="item.checked" data-ng-click="categorySelected(item)" />
<strong class="float-left">{{item.CategoryName}}</strong>
</label>
</div>
<div data-ng-show="item.checked" style="padding-left: 25px" class="pad15L">
<div data-ng-repeat="service in serviceList | servicelistfilter:item.ShortName | orderBy: 'SortOrder' ">
<div class="form-row mrg0A pad10B">
<div class="row">
<div class="col-lg-8 col-md-6 col-sm-6">
<div class="service-amount-label pad5L mrg5T">
<label>
<input class="wauto float-left mrg5R" type="checkbox" data-ng-model="service.checked"
data-ng-checked="service.checked" data-ng-click="selectService(service)" />
<strong class="float-left">{{service.Name}}</strong>
</label>
</div>
</div>
<!--TAP-4394
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="service-amount float-right" data-ng-show="service.checked && !service.hideRange">
<input type="text" placeholder="$50" data-ng-model="featureDetail.minAmount" name="minAmount" data-ng-required="featureDetail.isSelected">
<span class="mrg5R mrg5T">$</span>
<decimal-text-box class="mrg5R" max-value="service.MaxAmount" min-value="'invalid'" min-max-error="service.minMaxError" input-placeholder="'$min'" input-class="'selectService'" input-value="service.MinAmount"></decimal-text-box>
<span class="dash mrg5R mrg5T">–</span>
<span class=" mrg5R mrg5T">$</span>
<decimal-text-box class=" " max-value="'invalid'" min-value='service.MinAmount' min-max-error="service.minMaxError" input-placeholder="'$max'" input-class="'selectService'" input-value="service.MaxAmount"></decimal-text-box>
<div data-ng-show="service.checked && !service.hideRange" class="new-error-style">
<span data-ng-show="service.minMaxError" class="font-white">min should not be greater than max</span>
</div>
</div>
</div>-->
<!-- <div class="col-lg-5">
<div data-ng-show="service.checked && !service.hideRange">
<span data-ng-show="service.minMaxError" class="font-red">min should not be greater than max</span>
</div>
</div>-->
</div>
</div>
<div class="form-row pad10B mrg0A service-custom-text"
data-ng-repeat="customitem in customServiceList | listfilter:service.ShortName "
data-ng-show="service.checked" data-ng-model="customServiceList" ng-init="">
<!--data-ng-click="showEditCustomService(customSvc.CustomText,customSvc.Amount)"-->
<div class="col-md-5 col-sm-5">
<span class="pad0L pointer" data-ng-click="removeCustomService(service,customitem.Id)"><i class="fa fa-fw fa-minus-circle"></i></span>
<input type="text" data-ng-model="customitem.CustomText" placeholder="Custom Service" class="selectService w40 mrg5Bxs" />
<span class="mrg20L">
<decimal-text-box min-value="'invalid'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'Amount'" input-class="'selectService w40 '" input-value="customitem.Amount"></decimal-text-box>
</span>
<textarea class="selectDescription" cols='60' rows='8' data-ng-model="customitem.CustomDescription" placeholder="Description (Optional)"></textarea>
</div>
<div ng-hide="businessModel.name == 'Book Now'">
<div class="center-bor" style="height: 231px;"></div>
<div class="float-left col-md-5 col-sm-5 activate-bundle-container gray">
<div class="activate-bundle-button" ng-hide="customitem.CustomServiceBundle && !customitem.isDeleteBundle" ng-click="activateBundle(customitem)">Activate Bundle Rates</div>
<div ng-show="customitem.CustomServiceBundle && !customitem.isDeleteBundle">
<div class="cancel-bundle-button" ng-click="cancelBundle(customitem)">Cancel</div>
<input name="customBundleQuantity" type="number" class="selectService mrg70T" placeholder="# of Bundles" ng-model="customitem.CustomServiceBundle.BundleQuantity" ng-change="change(customitem.CustomServiceBundle.BundleQuantity, customitem)" />
<div class="font-red" ng-if="selectServiceForm.customBundleQuantity.$error.pattern">Quantiy must be more than 1.</div>
<input type="number" step="0.5" name="{{service.name}}"
class="selectService mrg20T" placeholder="Price (per Unit)"
ng-model="customitem.CustomServiceBundle.BundlePrice"
ng-change="change(customitem.CustomServiceBundle.BundlePrice, customitem)" compare-price price-to-compare="customitem.Amount" />
<div class="font-red" ng-if="selectServiceForm.customBundlePrice.$error.priceValid">Bundle Price must be less than Original Price..</div>
<!--<decimal-text-box min-value="'2'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'# of Bundles'" input-class="'selectService mrg70T'" input-value="customitem.CustomServiceBundle.BundleQuantity" change="Change"></decimal-text-box>-->
<!--<decimal-text-box min-value="'1'" max-value="'invalid'" min-max-error="'invalid'" input-placeholder="'Price'" input-class="'selectService mrg20T'" input-value="customitem.CustomServiceBundle.BundlePrice"></decimal-text-box>-->
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9">
<div class="custom-service" data-ng-show="service.checked">
<div class="pad10B pad0T pad0L">
<i class="fa fa-fw fa-plus-circle"></i>Add a Service
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--End of selectServiceForm-->
</div>
</section>
</div>
</form>
My project is using Angular v1.3.15, I know its an old version but it will be too much to jump forward from this version.
Hello I am working with MEAN Stack application.When I add record data stored
Successfully. But When I don't fill any field and click add button which is
Calling function for store record My function working properly But I used the
Validation field is required but function working and redirect my given path.
new data is not storing but why function is working.
function in controller
$scope.adduser = function()
{
$http({
method:"POST",
url:'api/adduser',
data:{name:$scope.name, email:$scope.email,password:$scope.password}
}).then(function successCallback(response) {
if(response.data.error){
$scope.error = response.data.error;
}else{
$scope.Blog=response.data;
$localStorage.dd=$scope.Blog;
$location.path('/allusers');
}
//console.log(response);
}, function errorCallback(response) {
alert("data is not comming here");
});
}
message show field is required but not stay there go to the given path when
response success. how to resolved this problem
view file is
<!-- BEGIN PAGE HEADER-->
<h3 class="page-title">
Advanced Datatables <small>advanced datatable samples</small>
</h3>
<div class="page-bar">
<ul class="page-breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
All Users
</li>
</ul>
</div>
<div class="row">
<div class="col-md-12">
<!-- BEGIN VALIDATION STATES-->
<div class="portlet box blue-hoki">
<div class="portlet-title">
<div class="caption">
<i class="fa fa-gift"></i>
New User
</div>
</div>
<div class="portlet-body form">
<form id = "expensesCreate" class="form-horizontal">
<div class="form-body">
<div class="alert alert-danger display-hide">
<button class="close" data-close="alert"></button>
You have some form errors. Please check below.
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Name</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="first_name" name="name" ng-model="name" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="price" class="col-sm-3">Email</label>
<div class="col-sm-4 #if($errors->has('price')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="email" name="email" ng-model="email" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-group">
<label for="Phone_no" class="col-sm-3">Password</label>
<div class="col-sm-4 #if($errors->has('Phone_no')) has-error #endif">
<input class="form-control input-sm" placeholder="" autocomplete="off" id="phone_no" name="company_name" ng-model="password" type="text" value ="" required>
<p class="error"></p>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-9">
<button ng-click="adduser()" class="btn blue-hoki">Add</button>
<a ng-href="#/allusers">
<button type="button" class="btn default" id="cancel">Cancel</button>
</a>
</div>
</div>
</div>
</div>
</form>
<!-- END FORM-->
</div>
</div>
<!-- END VALIDATION STATES-->
</div>
</div>
<style>
.form-horizontal .form-group {
margin-right: -15px;
margin-left: 0px;
}
</style>
Add disabled attribute on your button validation while the form is invalid
<button ng-click="adduser()" class="btn blue-hoki" ng-disabled="expensesCreate.$invalid">Add</button>
When I click on my next button and it goes to step 2 and if I reload the page I would like to make sure it stays on the same div that I am on.
The 2 divs I use are join_form_1 and join_form_2
At the moment it when I reload page it goes back to first div
How can I make it stay on the div I am on?
Codepen Example Here
$(document).ready(function(){
$("#join_form_2").hide();
$("#step_1_link").addClass("active");
$("#next").click(function(){
$("#step_1_link").removeClass("active");
$("#step_2_link").addClass("active");
$("#join_form_1").hide();
$("#join_form_2").show();
});
});
HTML
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="heading-message">
<div class="text-center">
<i class="fa fa-user" aria-hidden="true"></i>
</div>
<div class="text-center">
<h1>Request A Admin Member Login</h1>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-9 col-md-9 col-sm-12 col-xs-12">
<ol class="steps list-inline">
<li id="step_1_link">
Step 1: Set up a personal account
</li>
<li id="step_2_link">
Step 2: Choose profile picture
</li>
</ol>
<div id="join_form_1">
<div class="form-group">
<label>Username</label>
<input type="text" name="username" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Email</label>
<input type="text" name="email" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" value="" class="form-control" placeholder="" />
</div>
<div class="form-group">
<label>Confirm Password</label>
<input type="password" name="confirm_password" class="form-control" placeholder="" />
</div>
<div class="form-group">
<button type="button" class="btn btn-default" id="next">Next</button>
</div>
</div><!-- Setup_1 -->
<div id="join_form_2">
<div class="form-group">
<label>Upload A Image</label>
<input type="file" name="userfile" size="50" />
</div>
</div><!-- Setup_1 -->
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<div class="info-box">
<h2>You'll Love This Forum</h2>
</div>
</div>
</div>
</div>
You can use javascript cookie API here
So when user clicks 'Next'
Cookies.set('active', 'join_form_2');
Than if user clicked in the previous session, show form 2.
if (Cookies.get('active') == 'join_form_2') {
$("#join_form_1").hide();
$("#step_1_link").removeClass("active");
} else {
$("#join_form_2").hide();
$("#step_1_link").addClass("active");
}
Here is working codepen.
The easiest and most reliable way to do this is to use Fragment_identifier along with :target pseudo selector.
This will work even if cookies are disabled. And since you're using bootstrap, it's easy to style <a> tags like buttons.
For example:
if (!window.location.hash) {
window.location.hash = 'step1';
.steps:not(:target) {
display: none;
}
step1
step2
<div id="step1" class="steps">Step1</div>
<div id="step2" class="steps">Step2</div>