Can the rules of Jquery validation be changed on condition

Question

Is it possible to change the rules of jquery validation.

The issue is that the SSN,a valid 9 digit code is being reformatted to include hyphens,which then makes it a 11 characters and it fails the validation of maxlength,even though it is absolutely what I wanted.If,I dont have the validation of maxlength,a user could enter more than 9 digits and the formatting will not happen.

I am kinda facing a catch 22 situation I think.Its the same with cntact number which is 10 digits but then formatting has hyphens and brackets and then becomes 13 characters.This is absolutely fine.The requirement is like that.But validation fails after formatting and the form does not submit.

Any idea if I can change the rules or if you folks have a better solution,please let me know.

The code:

  $("#ProviderDetailsForm").validate({     
    onfocusout: function(element, event) {
        this.element(element);
    },
    rules:
        {
            SSN: { required: true, minlength :9,maxlength: 9, digits: true },   
            ContactNumber: { required: true, minlength: 10,maxlength:10, digits: true },    
        },
    messages: {
        SSN: {
            required  : "Please enter your SSN",
            minlength : "Invalid SSN(9 Digits atleast)",
            maxlength : "Invalid SSN(9 Digits only)"
        },

        ContactNumber: {
            required : "Please enter your Contact Number",
            minlength: "Enter a 10 digit contact number",
            maxlength: "Enter a 10 digit contact number"
        },    
    }

});

HTML:

   <body>
  <div class="container">
    <form class="form-horizontal" role="form" id="ProviderDetailsForm" method="post">
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">SSN:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" placeholder="Enter the SSN" id="SSN" name="SSN" data-bind="value: SSN" onkeypress="return onlyNumbers(event);" maxlength="11" />
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_SSN">Enter the SSN</label>
        </div>
        <div class="form-group">
            <label class="col-sm-2 control-label labelfont">CONTACT NUMBER:</label>
            <div class="col-sm-6">
                <input type="text" class="form-control" data-bind="value: ContactNumber" name="ContactNumber" placeholder="Enter the Contact Number" id="ContactNumber" onkeypress="return onlyNumbers(event);" maxlength="13" />
            </div>
            <label class="col-sm-4 labelfont errorMsg" id="Err_ContactNum">Enter the Contact Number</label>
        </div>
        <div class="form-group">
            <button type="submit" id="Submit" class="btn btn-primary col-sm-1 col-sm-offset-4">Submit</button>
            <button type="reset" id="Reset" class="btn btn-primary col-sm-1">Reset</button>
        </div>
    </form>
</div>

I have attached fiddle of the issue that I am facing.

http://jsfiddle.net/dcz31arf/6/ ... Tab out for formatting.

I did try the following code on tab out.

    $("#SSN").rules("remove", { maxlength:9 });
    $("#SSN").rules("add", { maxlength: 11 });

This did not work.

score 1 · Accepted Answer · edited May 23 '17 at 11:56

Your validator cannot have digits only if you are adding hyphens. If you just want to erm, mask the input, just use a jQuery input mask plugin. For example, this plugin for the social would look like this:

<input data-inputmask="'mask': '999-99-9999'" />

The mask will ensure proper length and format. You will of course need to change length validators in your rules.

Otherwise you will probably need to create a custom (regex) validator method.

Can the rules of Jquery validation be changed on condition

1 Answers1