Question

I’m using the jQuery Validate plugin in conjunction with BriteVerify on my page (BriteVerify is a service that checks for known junk email addresses and other data, to prevent phony/spam signups on a form).

Note that a “valid” field (as determined by the Validate plugin) can be considered junk by BriteVerify. For example, [e-mail] passes validation since it’s a well-formed address, but BriteVerify blocks it because that account doesn’t actually exist.

So, what I want to do is this: if the response from BriteVerify indicates that the email address is no good, programmatically mark the field as “invalid” (the way that the Validation plugin would do itself). See below:

jQuery.briteVerify.email(jQuery("#email").val(), function(email){
    if (email.errors) {
        // Trigger jQuery Validate's invalid appearance/error message here
    } else {
        // Do nothing - email is valid
    }
}

I hope that makes sense. Is this possible?

Answer 1

I couldn’t find a way to “trigger” the field being invalid, but I was able to accomplish something equivalent like this:

jQuery.briteVerify.email(jQuery("#email").val(), function(email){
    if (email.errors) {
        msg = email.errors[0][1];
        if (!($("#email").hasClass("error"))) {
            $("#email").addClass("error").after("<label class='bv error'>" + msg + ".</label>");
        }
    } else {
        form.submit();
    }
}

So if BriteVerify doesn’t like the email that was entered, and the input field doesn’t already have the error class (indicating that it passed “normal” validation), then I add the class and dynamically insert the error message. Using the same classes gives it the same appearance as if Validate had marked the field invalid.

Notice how the label element has an additional bv class – this is to determine whether the error message came from Validate or from BriteVerify. So then to prevent two error messages displaying at once (one from each), I remove the BriteVerify error message (if there is one) both when the field passes “normal” validation:

$("#register").validate({
    ...
    success: function(){
        $(".bv").remove();
    }
});

And whenever a key is pressed:

$("#email").keypress(function(){
    $(".bv").remove();
});