How to Disable Certain Field using jQuery

, , Leave a comment

For some instances we may in need of disable some fields which has a dependency of another field. For example You want the user to fill the User Id, Password, and Confirm Password fields. If the user enters invalid data or leaves any field blank, you want not only to display the error message but also to disable the rest of the fields until the error is corrected.

We will start with Markup

HTML

<form>  <div>  <span class="label">User Name </span>  <input type="text" class="username" name="username"/>  <span class="error"> User name cannot be blank</span>  </div>  <div>  <span class="label">Password </span>  <input type="password" class="password" name="password" />  <span class="error"> Password cannot be blank</span>  </div>  <div>  <span class="label">Confirm Password </span>  <input type="password" class="confpass" name="confpass" />  <span class="error"> Password and Confirm Password don't match</span>  </div>  </form>

 

Styling with CSS

.label  {float: left; width: 120px; }  .error  { color: red; padding-left: 10px; }  .submit  { margin-left: 125px; margin-top: 10px;}  div  {padding: 5px; }

 

Javascript

Dowonload jquery-1.4.4.min.js

I have created a "disable.js" file into "js" folder. All of our javascript code will go into this javascript file.

<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>  <script src="js/disable.js" type="text/javascript"></script>

 

Place the above code after the title tag.

Now we are going to add our javascript into the "disable.js" file. Add the following code into disable.js file.

$(document).ready(function() {  $('.error').hide();  $('.username').blur(function(){  data=$('.username').val();  var len=data.length;  if(len<1)  {  $('.username').next().show();  $('.password').attr('disabled',true);  $('.confpass').attr('disabled',true);  }  else  {  $('.username').next().hide();  $('.password').removeAttr('disabled');  $('.confpass').removeAttr('disabled');  }  });  $('.password').blur(function(){  data=$('.password').val();  var len=data.length;  if(len<1)  {  $('.password').next().show();  $('.confpass').attr('disabled',true);  }  else  {  $('.password').next().hide();  $('.confpass').removeAttr('disabled');  }  });  $('.confpass').blur(function(){  if($('.password').val() !=$('.confpass').val())  {  $('.confpass').next().show();  }  else  {  $('.confpass').next().hide();  }  });  });

 

The above jQuery does these things

Validates the data entered by the user

Displays the error messages

 Disables the rest of the fields if data is skipped or some invalid data is entered in any field

Initially we hide the error messages (elements nested inside the span element of the class error). Thereafter, we check if the blur() event has occurred on the text-input field of class username; that is, whether the focus is lost on the User Name field.

If yes, we retrieve the data entered by the user in that field and store it in variable data. If the length of the contents in the variable data is found to be less than 1—that is, if the User Namw field is left blank—we make the element next to the User Name field (which is the span element of the class error) appear on the screen; we display the error message User Name cannot be blank on the screen. Beside this, we also use the following two statements:

$('.password').attr('disabled',true);  $('.confpass').attr('disabled',true);

 

To disable the Password and Confirm Passwords fields (two input fields of the classes password and confpass); that is, until and unless the user enters the User Name, both of the fields will be disabled. When the user enters some data in the User Name field, both of the disabled fields will be enabled with the following two statements:

$('.password').removeAttr('disabled');  $('.confpass').removeAttr('disabled');

 

Similarly, we check if the Password field is left empty. If yes, again we see the error message

Password cannot be blank and the Confirm Password field will be disabled until the user enters some data in the Password field.

Finally, we check if the data entered in the Password and Confirm Password fields (data in elements of the.password and .confpass classes) are exactly same. If the two don't match, we display the error message (which is the element next to the Confirm Password field) Password and Confirm Password don't match.

See the Demo

Share this: