Friday, March 11, 2016

Make your mandatory input controls more visible to users

It is true that we can use many plugins or validators to make validation easy. But today we will see how we can notify user for mandatory fields. We need jquery to do so. Look at the below code.

 .required{  
   border:1px solid #ff3300 !important;  
   color:#ff3300 !important;  
 }  

We write our validator as below;

 if ($('#txtlbfirstName').val() == '') {  
     $("#txtlbfirstName").addClass('required');      
     flValidated = false;  
   }  

And we remove the class when user start typing.


 $('#txtlbfirstName').keyup(function () {  
     var val = this.value;  
     if(val.length>0)  
       $('#txtlbfirstName').removeClass('required');  
   });  

So the ultimate result looks like;


It looks nice and Happy coding.. :)

No comments:

Post a Comment