jQuery validate rule ONLY AT SUBMIT

Question

Say i have a form that looks up city, state locations. if the user enters an incorrect city, state, i want the form to be able to check the database against the users input, and see if the input is valid or not. If it is not, i want the user to be prompt.

So form Validate is the plugin for me.

$("#form").validate({
    rules: {
       citystate: {
           required: true,
           myCustomAjaxSyncronousCheckAgainstDBRule: true
       }

    submitHandler: function(form) {
        if ($("#form").valid()) {
            form.submit();
        }
    }
});

Now say this form has to be used in 4 different places in my website, so it would suck to refactor out the myCustomAjaxSyncronousCheckAgainsDBRule (Fake name btw) and have the same code 4 times throughout my website. So that is why i created a custom rule in the JS file. But is there a way that the rule CAN ONLY be checked at Submit time. Since if there is an invalid user input, it will check it at EVERY key stroke, which can be quite cumbersome. Especially since i have jQuery.ui.autocomplete running inconjuction.

check my answer below for an alternative – sabotero Feb 13 '15 at 09:59 — sabotero, Feb 13 '15 at 09:59

score 36 · Answer 1 · answered Mar 09 '11 at 21:33

36

All of the validations can be set independently (onclick, onkeypress,onsubmit,etc.)

Demos and details are available on the docs site http://docs.jquery.com/Plugins/Validation/validate


$("#form").validate({
   onkeyup: false,
   onclick: false
})

answered Mar 09 '11 at 21:33

iivel

2,576
22
19

6

what if we want only 1 rule to have non onkeyup validation. Or onclick. but the rest are ok. By this, i mean one of the many inputs to have only on submit checking. – ThePrimeagen Mar 09 '11 at 21:36
You mean within a single form have a single field not follow the validate settings? Not sure that you can do that without running a prototype to validate(). In that case I'd use the metadata plugin and have it not bind to those fields (though this may involve breaking the delegate). – iivel Mar 09 '11 at 21:47
All hidden fields are only validated before the form is submitted because they never receive focus. Perhaps you can update the value of a hidden input and apply the rule to that. – menzies Mar 11 '11 at 02:23
@iivel you can choose which elements don't follow the settings, actually you can modify the settings in order to achive that. Check my answer below – sabotero Feb 13 '15 at 09:58
@Michael those validation parameters can be set to functions that return a boolean. This boolean will tell the validation plugin to validate the input or not. For example: if you want to validate only the ` – FlavioEscobar Mar 15 '16 at 17:38

score 10 · Accepted Answer · answered Feb 13 '15 at 09:56

As an alternative an a more straightforward way you can pass a function to the onfocusout and onkeyup settings of the jquery.validator to decide if an element has to be validated in those events or not, as this :

jQuery.validator.defaults.onfocusout = function (element, event) {
    // detectect if is the element you dont want validate
    // the element has to have the attribute 'data-control="mycitycontrol"'
    // you can also identify your element as you please
    if ($(element).data("control") === "mycitycontrol") return;
    if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
        this.element(element);
    }
}
jQuery.validator.defaults.onkeyup = function (element, event) {
    // detectect if is the element you dont want validate
    // the element has to have the attribute 'data-control="mycitycontrol"'
    // you can also identify your element as you please
    if ($(element).data("control") === "mycitycontrol") return;
    if (event.which === 9 && this.elementValue(element) === "") {
        return;
    } 
    else if (element.name in this.submitted || element === this.lastElement) {
        this.element(element);
    }
}

If this still was my problem, this is how i would solve this. — ThePrimeagen, Feb 19 '15 at 16:40
An alternative way to accomplish this: $("#myfield").on("focusout keyup", function(e){ e.stopPropagation(); }); — David Hammond, May 08 '15 at 15:39

score 9 · Answer 3 · edited May 14 '15 at 15:59

9

$.extend($("#form-id").validate().settings, { 
    onkeyup: false, 
    onfocusout: false 
});

edited May 14 '15 at 15:59

emerson.marini

9,331
2
29
46

answered Oct 21 '11 at 17:36

Rodrigo Manguinho

1,411
3
21
27

score 6 · Answer 4 · answered Aug 20 '14 at 14:41

6

$("#form").validate({ onfocusout: false, onkeyup: false, onclick: false });

answered Aug 20 '14 at 14:41

adgiovanni

61
1
2

Unfortunately, @iivel has already given an identical answer. so i cannot accept this. – ThePrimeagen Aug 28 '14 at 15:16

score 6 · Answer 5 · answered Mar 09 '11 at 22:35

Here's an idea that might work: separately bind the keyup function for your field that you don't want the keyup event to be validated on, and have it not bubble:

$('#citystateID').bind('keyup',function(){
   return false; 
});

I couldn't figure out how to bind the validator specific events (focusin and focusout), so it would still run validations whenever focus left your "citystate" input, but it's closer to what you wanted?

I briefly tested this here: http://jsfiddle.net/svUdp/ seemed to work alright (watch your console to see what happens - lots of events being triggered, but not so many validates).

score 6 · Answer 6 · answered Aug 26 '11 at 16:38

If you're trying to get a particular validation method to fire ONLY on the submit event while allowing other validation methods to fire normally (e.g., on the onkeyup event), then you can dynamically add the rule when the submit event fires, then remove it after the validation is performed. The ordering of the bindings is important; keep them in order.

$('#form').bind('submit', function(event) {
    $('#citystate').rules('add', {myCustomAjaxSyncronousCheckAgainstDBRule: true});
    event.preventDefault();
});

$('#form').validate({
    rules: {
        citystate: { required: true }
    }
});

$('#form').bind('submit', function(event) {
    $('#citystate').rules('remove', 'myCustomAjaxSyncronousCheckAgainstDBRule');
    event.preventDefault();
});

jQuery validate rule ONLY AT SUBMIT

6 Answers6

Linked