CODEWITHSUNDEEP
jqueryjquery-validateblur
boje
boje

Reputation: 880

jQuery validation remove blur on one field

I have a ajax function where a user entry something and a suggestion are showed in a dropdown. My problem is I am using jQuery validation, and when user click on a suggestion, is tackle that as a onlur and et do not get the value the user click on.

I tried to remove the onblur function on one field by using:

$('#customerExist').bind('blur',function(){
           return true;
    });

But this do not work. I want to used onblur validation on all field beside the ajax-suggestion.

The best solution would be to make onblur validation on all field but if the validation method i have made could waint 1 sec. before it take the value of the input-field.

I know that i can use onfocusout: false, but i will tried to avoid that.

This is the validation method:

jQuery.validator.addMethod("customerExist", function(value, element, param) {
if ( this.optional(element) )
    return "dependency-mismatch";

var previous = this.previousValue(element);
if (!this.settings.messages[element.name] )
    this.settings.messages[element.name] = {};
previous.originalMessage = this.settings.messages[element.name].remote;
this.settings.messages[element.name].remote = previous.message;

param = typeof param == "string" && {url:param} || param;

if ( this.pending[element.name] ) {
    return "pending";
}
if ( previous.old === value ) {
    return previous.valid;
}

previous.old = value;
var validator = this;
this.startRequest(element);
var data = {};
data["customer"] = encodeURIComponent(value);
$.ajax($.extend(true, {
    url: www+"validation.jsp",
    dataType: "json",
    data:  data,
    success: function(response) {
        validator.settings.messages[element.name].remote = "This customer do not exist";//previous.originalMessage;
        var valid = response === true;
        if ( valid ) {
            var submitted = validator.formSubmitted;
            validator.prepareElement(element);
            validator.formSubmitted = submitted;
            validator.successList.push(element);
            validator.showErrors();
        } else {
            var errors = {};
            var message = response || validator.defaultMessage( element, "remote" );
            errors[element.name] = previous.message = $.isFunction(message) ? message(value) : message;
            validator.showErrors(errors);
        }
        previous.valid = valid;
        validator.stopRequest(element, valid);
    }
}, param));
return "pending";
   }, "");

Upvotes: 3

Views: 4514

Answers (2)

Jonathan
Jonathan

Reputation: 32868

I would suggest a similar approach to @Kipriz, except that you should check for a class on the element rather than referring to the element directly.

// suppresses on-focusout validation of fields marked 'no-validate-on-focusout'
// validation still occurs on attempting to submit the form
(function() {
    var oldonfocusout = $.validator.defaults.onfocusout;
    $.validator.setDefaults({
        onfocusout: function (element) {
            if ($(element).hasClass('no-validate-on-focusout')) {
                return;
            }
            oldonfocusout.call(this, element);
        }
    });
}())

Then you can easily make any element behave the same way on blur, simply by adding the class.

<input class="no-validate-on-focusout" type="input" />

Upvotes: 2

Kipriz
Kipriz

Reputation: 335

You can provide a function as onfocusout parameter. For example if you want to cancel validation for a specific elements:

 $('#filterForm').validate(
    {           
        onfocusout:function (element) {
            if (!$(element).is('.customerExist')) {
                if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
                    this.element(element);
                }
            }
        }
    });

If you want to make a delayed validation, you can try the following:

$('#filterForm').validate(
    {
        onfocusout:function (element) {
            var me = this;
            var delayedValidation = function() {
                me.element(element);
            };
            if (!this.checkable(element) && (element.name in this.submitted || !this.optional(element))) {
                if ($(element).is('.customerExist')) {
                    setTimeout(delayedValidation, 200);
                } else {
                    this.element(element);
                }
            }
        }
    });

Upvotes: 3

Related Questions