Monday, 2 September 2013

jQuery form validation using jquery.validate.min.js

<html>
<head>
<style type="text/css">

.error, .notice, .success{padding:.1em; margin-bottom:1em; border:2px solid
#ddd}
.error{background:#FBE3E4; color:#8a1f11; border-color:#FBC2C4}
.notice{background:#FFF6BF; color:#orange; border-color:#FFD324}
.success{background:#E6EFC2; color:#264409; border-color:#C6D880}

</style>
<script src="jquery.js"></script>
<script src="jquery.validate.min.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function()
{
    $("#contact-form").validate({
       rules:{
              username:"required",
              userid:"required",
              useremailid:{required:true,email:true},
              usermobile:{required:true,digits:true,rangelength:[10,10]},
              userage:{required:true,digits:true,min:18,max:100},
              userpass:{required:true,rangelength:[6,10]},
              confpass:{required:true,equalTo:'#userpass'},
              country:{required:true,countrylist:["India"]},
              city:{required:true,citylist:["Kolkata","Chennai","Mumbai","New Delhi"]},
              langs:{required:true,langcount:[2]},
              ambition:{rangelength:[10,20]},
              vcode:{required:true,verify:true},
               
        }, //end rules
         messages:{
                usermobile:{required:"Please enter your mobile number",digits:"Please enter a valid mobile number",rangelength:"The mobile number must have exactly 10 digits"},
                confpass:{required:"Please enter the password again",equalTo:"The passwords do not match"},
                langs:{required:"Tick the languages you know"},
                ambition:{rangelength:"Should be 10 to 20 characters"},
                vcode:{required:"Please enter verification code"},
            },//end messages
           
       errorPlacement:function(error, element)
                      {
           if ( element.is(":radio") || element.is(":checkbox")) 
              {
                 error.appendTo( element.parent());
              } else 
                 {
                  error.insertAfter(element);
                 }
                     }//end errorPlacement
        });
       
        $.validator.addMethod("countrylist",function(value,element,params)
        {
           return this.optional(element)||   
                   value.toLowerCase()== params[0].toLowerCase();
        },"You must be an Indian citizen");
       
        $.validator.addMethod("citylist",function(value,element,params)
        {
            return this.optional(element) || 
            value.toLowerCase()==params[0].toLowerCase() ||
            value.toLowerCase()==params[1].toLowerCase() ||
            value.toLowerCase()==params[2].toLowerCase() ||
            value.toLowerCase()==params[3].toLowerCase() ;
        },$.format("You must stay in one of {0},{1},{2} or {3}"));
       
        $.validator.addMethod("langcount",function(value,element,params)
        {
            $langcount=$("form input:checkbox:checked").length;
           
            return this.optional(element) || $langcount>=params[0];
        },$.format("You must know at least {0} languages"));
       
        $.validator.addMethod("verify",function(value,element,params)
        {
            var total=parseInt($('#no1').val()) + parseInt($('#no2').val());
           
            return this.optional(element) || parseInt(value)==total;
        },$.format("Verification failed..please try again"));
       
        $('input:radio[name=pmtmeth]').change(function(){
       
            if($(this).val()=='cheque')
            {
                $('#chequeno').attr('readonly',false);
                $('#chequeno').rules('add',"required digits");
                $('#chequeno').rules('add',{messages:        {required: "Please enter cheque number",digits:"Invalid Cheque number. Should be digits only"}});               
            }
            else
            {
                $('#chequeno').attr('readonly',true);
                $('#chequeno').rules('remove',"required digits");
                $('#chequeno').val('');
                $('#chequeno').removeClass('error');
                $('label[for=chequeno]').remove();
               
            }
           
        });
       
});

</script>
</head>
<body>
<form id="contact-form">
Name<br />
<input type="text" name="username" value="" />
<br />UserId<br />
<input type="text" name="userid" value="" />
<br />EmailId<br />
<input type="text" name="useremailid" value="" />
<br />Mobile No<br />
<input type="text" name="usermobile" value="" />
<br />Age (must be between 18 and 100)<br />
<input type="text" name="userage" value="" />
<br />Country<br />
<input type="text" name="country" value="" />
<br />City<br />
<input type="text" name="city" value="" />
<br />Password (6 to 10 characters)<br />
<input type="password" id="userpass" name="userpass" value="" />
<br />Confirm Password<br />
<input type="password" name="confpass" value="" />
<br /><br />Languages Known
<div>
<input type="checkbox" name="langs" value="Bengali">English
<input type="checkbox" name="langs" value="English">Spanish
<input type="checkbox" name="langs" value="Hindi">French
</div>
<br />Your Ambition<br />
<textarea name="ambition"></textarea>
<br /><br />Payment Method
<input type="radio" name="pmtmeth" value="cash" checked="checked">Cash</input>
<input type="radio" name="pmtmeth" value="cheque">Cheque</input>
<br />Cheque No<input type="text" name="chequeno" id='chequeno' value="" readonly="true"/>
<br /><br />Enter Verification Code
<input type="text" name="no1" id="no1" value="5" size="2"/> + <input type="text" name="no2" id="no2" value="7" size="2"/> = <input type="text" name="vcode" value="" size="2"/>
<br /><br />
<input type="submit" name="btnSubmit" value="SAVE" />
</form>
</body>
</html>
at No comments:
Subscribe to: Posts (Atom)

document.write() overwrites the entire page

document.write is a function which basically outputs whatever is given to it. But sometimes, improper usage may overwrite the entire page d...

  • Simple pagination class in PHP
    File: paginator.php   <?php require_once 'DB.php'; class Paginator {     private $queryStr;     private $pageSize;     priv...
  • Variable scope in JavaScript
    In JavaScript, variables can be declared in two ways, implicit declaration and explicit declaration. var x; This was an explicit declarati...
  • document.write() overwrites the entire page
    document.write is a function which basically outputs whatever is given to it. But sometimes, improper usage may overwrite the entire page d...