CODEWITHSUNDEEP
jqueryjquery-validate
MoDiggity
MoDiggity

Reputation: 261

Ignoring certain validation rules with jQuery validate

I am using jQuery validate plugin to do custom validations on my forms. For one particular type of form, the user has the option to submit the form, or they can also save the form without submitting. I was able to use $('form.validate').validate().cancelSubmit = true; to suppress validation in the onClick handler for the save button, and life was good.

However, one of the custom validations that was written enforces that people must enter legit characters (i.e. it enforces that you use valid ascii characters). I want to continue to enforce the ascii validation, because if I don't, people are able to save bad data to the database (which subsequently messes up integrations we have running).

Basically I want to enforce all rules except required: true. I see that you can use the ignore option when setting up the validation on the form $('form.validate').validate({ignore : ".required"}); but this only seems to work when you are initially setting up the validation. When I try to do that when a user clicks the button, it doesn't seem to do anything.

I've seen some posts about similar things but usually related to ignoring hidden fields. Does anybody know the correct syntax / method I need to use to ignore the required rule upon button click? Any help would be appreciated.

Upvotes: 2

Views: 7705

Answers (2)

Gerardo Verrone
Gerardo Verrone

Reputation: 431

You can use a ternary operator in the required rule to analize if the element has an in line class 'ignore' declared in the html.

Sample Bellow

HTML

<div class="row">
    <div class="input-field">
        <input id="userName" name="userName" type="text" class="validate ignore" maxLength="10">
         <label for="userName" class="required">Name</label>    
     </div>   
</div>

JS

    $('#userName').rules("add", {
        required: $('#userName').hasClass('ignore')? false: true,
        messages: {
            required: "This field is required!",
        }
    });

CSS

.required:before {
    content: "*";
    color: red;
    position: absolute;
    margin-left: -13px;
    font-weight: normal;
    font-size: 23px;
}

Before save, Iterate all the items and add the ignore class to the ones you like to bypass. Remove all the ignore class on the ones you like to validate.

Before submit, Iterate all the items and remove the ignore class to the ones you like to be validated.

Side Note: Observe the class="required" at the label. That will add a red asterix aside the field on all the ones that has that class and this is made with the provided css part

Upvotes: 0

Sparky
Sparky

Reputation: 98738

You could use the rules('remove') method to remove your rules dynamically. Something like this on your "save" button. 

$('#save').click(function () {
    $('#myform').find('.myclass').each(function () {
        $(this).rules('remove', 'required');
    });
    // your code to save form
});

Demo: http://jsfiddle.net/NqT2V/

Important NOTE: As per rules('remove') documentation, "Manipulates only rules specified via rules-option or via rules('add')." In other words, this will not work if your rules are added inline via class="required".

And the rules('add') method to add the rules back just before submit...

$('#submit').click(function (e) {
    e.preventDefault();
    $('#myform').find('input').each(function () {
        $(this).rules('add', 'required');
    });
    $('#myform').submit();
});

Demo: http://jsfiddle.net/3G8cN/

Upvotes: 4

Related Questions