Monday, 31 March 2014

Validation using Jquery Validator

Plugins:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"> </script>
        <script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.8.1/jquery.validate.min.js" type="text/javascript"> </script>   
              <script type="text/javascript" src="jQueryPlugins/date.js"></script>


// Must use validate method before creating and using rules.
 $("#Form_ID").validate({
                errorElement: "em",   //This is a css class for showing error messege
            });


//Rules for File upload  control
$('#fu_PassportFront').rules('add', {
                required: true,
                messages: {
                    required: "Please Upload Passport Front Page."
                }
            });

 //Rule for each text box with classname passportNo                    
            $('.passportNo').each(function () {
                $(this).rules('add', {
                    required: true,
                    lettersAndNumbers: true,
                    messages: {
                        required: "Please enter Passport Number.",
                        lettersAndNumbers: "Only alphanumeric for passport."
                    }
                });
            });
//Rules for Date
            $('.passIssueDay').each(function () {
                $(this).rules('add', {
                    required: true,                   
                    validateDate: true,
                    MaxDate: true,
                    messages: {
                        required: "Please enter Date",                       
                        validateDate: "Please enter a valid date dd/mm/yyyy.",
                        MaxDate: "Invalid Issue date"
                    }
                });
            });

            $('.passExpDay').each(function () {
                $(this).rules('add', {
                    required: true,
                    validateDate: true,
                    MinDate: true,
                    messages: {
                        required: "Please enter Date",
                        validateDate: "Please enter a valid date dd/mm/yyyy.",
                        MinDate: "Invalid Expiry date"
                    }
                });
            });
//Register methods.
            jQuery.validator.addMethod("lettersAndNumbers", function (value, element) {
                return this.optional(element) || /^[a-zA-Z0-9]*$/i.test(value);
            }, "Please enter alphabets and numbers only.");

            jQuery.validator.addMethod("MinDate",function(value,element){
            try{
            var minDate= new Date()
            var d = Date.parseExact(value, "d/M/yyyy");
            if(d==null){return false;}
            else if(d<minDate){return false;}
            else{return true;}
            }
            catch(e){return fals;}           
            },"Date Shoule be greater than current date"); 

             jQuery.validator.addMethod("MaxDate",function(value,element){
            try{
            var maxDate= new Date()
            var d = Date.parseExact(value, "d/M/yyyy");
            if(d==null){return false;}
            else if(d>maxDate){return false;}
            else{return true;}
            }
            catch(e){return fals;}           
            },"Date Shoule be less than current date");

            jQuery.validator.addMethod("validateDate", function (value, element) {
                try {
                    var d = Date.parseExact(value, "d/M/yyyy");
                    if (d == null) {
                        return false;
                    } else {
                        return true;
                    }
                }
                catch (e) {
                    return false;
                }
            }, "Please enter a valid UK date dd/mm/yyyy");

1 comment:

  1. Need help for below query...

    Form has passport expiry field and validation for field is, passport must have at least 6 months validity from current date.

    i have to do it in java-script/jquery... so pls help me for this.

    ReplyDelete