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
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
})
$.extend($("#form-id").validate().settings, {
onkeyup: false,
onfocusout: false
});
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();
});
$("#form").validate({
onfocusout: false,
onkeyup: false,
onclick: false
});
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);
}
}
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).