jQuery Based Validation

One of the most common task any web site developers do is writing a JavaScript for validation of various input which broadly includes

Numeric Fields (also range, decimal and integer only values)
Mandatory Fields (Invisible Fields should be ignored )
Email Fields
Limiting Text Areas

Sometimes writing JavaScript even using jQuery style is cumbersome and its too easy to get lost or at least remember each and every field name or ID to do the validation.

Now think how easy it would be to make a input field to accept only numeric values by just setting a single attribute. Example

Working Example Sample Code Comments Back to Links

<input type="text" id="Month" numeric="integer" min="1" max="12" >

// jQuery Function 

var _alertColor="#FF3300"; //red
var _noAlertColor=""; //nocolor

// This functions check for numeric value
$(document).ready(function(){
    
    $('input[numeric]').keyup(function(){
        var d=$(this).attr('numeric');
        var value=$(this).val();
        var orignalValue=value;
        val=val.replace(/[0-9]*/g, "");
       	
       	var msg="Only Integer Values allowed."; 
       	
       	if (d=='decimal'){
       	  value=value.replace(/\./, "");
          msg="Only Numeric Values allowed.";
          }
        
        if (val!=''){
        orignalValue=orignalValue.replace(/([^0-9].*)/g, "")
        $(this).val(orignalValue);
        alert(msg);
        }
        
    });

// Min and max check


    
  $('input[numeric]').change(function(){
      // value is present
    var tval=trim($(this).val());
       if (tval=='') return true;
         reg=/^0*/;
         tval=tval.replace(reg,'')
    
         if (tval!='') 
           val=parseInt(tval);
         else
           val=0;
    var min=parseInt($(this).attr('min'));
    var max=parseInt($(this).attr('max'));
    var msg="";
    
    if(min!='' && max !=''){
      msg='Input value should be in range of '+min + ' to ' + max + '.' ;
    }
    else{
      if(min!=''){msg='Input value should be greter than or equal to'+min +'.';}
      
      else{
        if(max!=''){msg='Input value should be less than or equal to '+ max +'.';}
      }
    }
    if(min!=''){
      if (min>val) {
        alert(msg);
        $(this).val('');
        $(this).css('background',_alertColor);
      }
    }
    
    if (max!=''){
      if (val>max) {
        alert(msg);
        $(this).val('');
        $(this).css('background',_alertColor);
      }
    }
  });
// Accept valid email ID only

  $('input[email]').keyup(function(){
    $(this).css('background',_noAlertColor);
  });
       
  $('input[email]').change(function(){
    // value is numeric
    str=($(this).val());        
    var err=false;

    if (trim(str)=='') return true;
    var filter=/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i; 
      
    if ( filter.test(str) ) {
      err=false; }
    else  {
      err=true; }
     
    if(err){
      alert(str + ' is not a valid email address.');
      $(this).val('');
      $(this).css('background',_alertColor);
    }
  });          


});

Interesting !!

I will discuss the others soon ...

Decimal Only
Integer Only
Integer Only with Min and Max (1 to 12)
Email Only
Text area input length	(No more than 100 character)