• Jquery Validation Plugin – Change Validation on a field on condition

    Posted on June 22, 2012 by in Jquery, Jquery Tips & Tricks, Other Programming, Tips & Tricks

    Recently, i saw a question in a forum, where the user wanted to validate a sample in two different ways based on a condition. The condition in this example is checking for an email validation textbox has @ in it, if doesnot have @ accept only alphabets,digits and hypens. There might be other conditions like changing the date format depending on the country selected etc. Both the examples are give below

    Example 1

    Checking for username or email on the same field.

      $("#frm").validate({
                rules: {
                    username: {
                        required: true,
                        usernameemail: true,
                        maxlength: 100
                    }
                }
       });
    
       $.validator.addMethod("usernameemail", function(value, element) {
            if (this.optional(element)) // return true on optional element
                return true;
            valid = true;
    
            if (value.indexOf("@") > 0) {
                valid = valid && $.validator.methods.email.call(this, value, element);
            } else {
                valid = valid && $.validator.methods.username.call(this, value, element);
            }
            return valid;
        }, 'Please provide a valid username or email');
    
        $.validator.addMethod("username", function(value, element) {
            return this.optional(element) || /^[a-z0-9\-]+$/i.test(value);
        }, "Username must contain only letters, numbers, or dashes.");
    

    Example 2

    Checking for different date formats as per selected dropdown.

      $("#frm").validate({
                rules: {
                    txtDate: {
                        required: true,
                        mydateformat: true
                    }
                }
       });
    
       $.validator.addMethod("mydateformat", function(value, element) {
            if (this.optional(element)) // return true on optional element
                return true;
            valid = true;
    
            if ($("#seldateformat") = "ddmmyyyy") {
                valid = valid && $.validator.methods.ddmmyyyy.call(this, value, element);
            } else {
                //format -- mmddyyyy
                valid = valid && $.validator.methods.mmddyyyy.call(this, value, element);
            }
            return valid;
        }, 'Please provide a valid date');
    
            /*custom validator method to accept date in dd/mm/yyyy format, note that regex is not perfect it allows 31 days for any month*/
            $.validator.addMethod("ddmmyyyy", function(value, element) {
                return this.optional(element) || /^((0[1-9])|(1\d)|(2\d)|(3[0-1]))\/(|(0[1-9])|(1[0-2]))\/((\d{4}))$/i.test(value);
                return true;
            }, "Please enter date in dd/mm/yyyy format.");
    
            /*custom validator method to accept date in mm/dd/yyyy format, note that regex is not perfect it allows 31 days for any month*/
            $.validator.addMethod("mmddyyyy", function(value, element) {
                return this.optional(element) || /^(|(0[1-9])|(1[0-2]))\/((0[1-9])|(1\d)|(2\d)|(3[0-1]))\/((\d{4}))$/i.test(value);
            }, "Please enter date in mm/dd/yyyy format.");
    
    Be Sociable, Share!
      Post Tagged with ,

    Written by

    Vanamali Juvvadi is a Web enthusiast and loves all things design and technology. Founded qnownow with a group of friends to share anything/everything they know/find on the internet.

    View all articles by

    Email : [email protected]

    Leave a Reply