Question

Is it possible to mark a field valid with jQuery validator, or to ask another way, to remote its associated error mappings. I’m using two custom ajax validation methods which means my validation methods can’t return true or false. Therefore, I tried to hide errors with showErrors: { field: false } (and mark validator.invalid.field=false) but I’m guessing some error mapping is still preserved which prevents the form from submitting when onsubmit: true. If I set onsubmit: true the form will submit even if there’s an error being displayed for one of the ajax validated fields!

$(document).ready(function () {

    var validator = $(".formframe").validate({
        groups: { phone: "phone_1 phone_2 phone_3" },
        rules: {
            FirstName: { required: true },
            LastName: { required: true },
            Email: { required: true, email_custom: true },
            phone_1: { required: true }, // these two fields get a phone validation rule
            phone_2: { required: true }, // added upon validation triggered by phone_3 
            phone_3: { required: true, phone: true },
            Address1: { required: true },
            City: { required: true },
            PostalZipCode: { required: true, postalcode: true },
            CustField1: { required: true, range: [1950,2012] }
        },
        messages: {
            FirstName: "S'il vous plaît entrer votre prénom",
            LastName: "S'il vous plaît entrer votre nom de famille",
            Email: "S'il vous plaît entrer une adresse email valide",
            phone_1: "S'il vous plaît entrer votre numéro de téléphone",
            phone_2: "S'il vous plaît entrer votre numéro de téléphone",
            phone_3: {
                required: "S'il vous plaît entrer votre numéro de téléphone",
                phone: "Numéro de téléphone doit être réel"
            },
            Address1: "S'il vous plaît, entrer votre adresse",
            City: "S'il vous plaît, entrer votre ville",
            PostalZipCode: {
                required: "S'il vous plaît entrer votre code postal",
                postalcode: "S'il vous plaît entrer votre code postal"
            },
            CustField1: {
                required: "S'il vous plaît entrer votre dernière année d'études",
                range: "Entrer une année de l'obtention du diplôme réel"
            }
        },
        onfocusout: function(element) { $(element).valid(); },
        errorPlacement: function(error, element) {
            if (element.attr("name") == "phone_1" || element.attr("name") == "phone_2" || element.attr("name") == "phone_3") {
                error.insertAfter("#phone_3");
            } else {
                error.insertAfter(element);
            }
        },
        onkeyup: false,
        onsubmit: true
    }); console.log(validator);

    // custom email validation method
    $.validator.addMethod("email_custom", function(value, element) {
        var verify = $.tdverify({
            // Use TowerData's domain authentication for best security 
            // or set your license key here
            'license' : 'xxx', 

            // This is the data to validate
            // The values here are the IDs of the input fields.
            // See demo.js on how to use jQuery or DOM to specify fields.
            'email' : $('#Email'),
        });

        // These are the API settings. 
        verify.set({
            'settings' : {
                'valid_email' : 'mailbox',  // Enable email validation of mailbox.
                                            // Use value of 'syntaxdomain' for syntax and 
                                            // domain validation only.
                'timeout'    : 5            // Set timeout to 5 seconds
            }
        });

        // because this function uses a callback, we can't return true to the validation
        // method, instead we set validator.invalid.[field name] = false so the form submits
        verify.process({
            'onSuccess' : function(data, textStatus, xhr) {
                if (typeof data.email == "object" && data.email.ok == false) {
                    //validator.showErrors({"Email": data.email.status_desc});
                    validator.defaultShowErrors();
                } else {
                    validator.showErrors({"Email": false});
                    delete validator.invalid["Email"];
                    console.log(validator);
                } 
            },
            'onError' : function() {
                validator.showErrors({"Email": "Email validation timeout"});
            }
        });
    });

    // custom phone validation method
    $.validator.addMethod("phone", function(value, element) {

        // concatenate phone number parts into a single hidden field
        $("#phone").val($("#phone_1").val() + $("#phone_2").val() + $("#phone_3").val());
        // initially only phone_3 has validation enabled, this allows the phone number to be
        // typedfrom start to finish, adding the phone class to phone_1 and phone_2
        // will cause them to be validated if they are changed
        $("#phone_1,#phone_2").addClass("phone");

        var verify = $.tdverify({
            // Use TowerData's domain authentication for best security 
            // or set your license key here
            'license' : 'xxx', 

            // This is the data to validate
            // The values here are the IDs of the input fields.
            // See demo.js on how to use jQuery or DOM to specify fields.
            'phone' : $("#phone")
        });

        // These are the API settings. 
        verify.set({
            'settings' : {
                'valid_phone' : true,       // Enable phone validation
                'timeout'    : 5            // Set timeout to 5 seconds
            }
        });

        verify.process({
            'onSuccess' : function(data, textStatus, xhr) {
                if (typeof data.phone != "undefined" && data.phone.ok == false) {
                    //validator.showErrors({"phone": data.phone.status_desc});
                    validator.defaultShowErrors();
                } else {
                    validator.showErrors({"phone_3": false});
                    delete validator.errorMap["phone_1"];
                    delete validator.errorMap["phone_2"];
                    delete validator.errorMap["phone_3"];
                    delete validator.invalid["phone_1"];
                    delete validator.invalid["phone_2"];
                    delete validator.invalid["phone_3"];
                    console.log(validator);
                }               
            },
            'onError' : function() {
                validator.showErrors({"phone_3": "Phone validation timeout"});
            }
        })
    });

    $.validator.addMethod("postalcode", function(postalcode, element) {
        if(postalcode.length == 6 && !parseInt(postalcode)){
            // no space in postal code
            var s = postalcode.substring(0,3) + ' ' + postalcode.substring(3);
            element.value = s;
        }
        return this.optional(element) || postalcode.match(/(^[ABCEGHJKLMNPRSTVXYabceghjklmnpstvxy]{1}\d{1}[A-Za-z]{1} ?\d{1}[A-Za-z]{1}\d{1})$/);
    });

    // phone number auto-tabbing
    $('#phone_1').autotab({ target: 'phone_2', format: 'numeric' });
    $('#phone_2').autotab({ target: 'phone_3', format: 'numeric', previous: 'phone_1' });
    $('#phone_3').autotab({ previous: 'phone_2', format: 'numeric' });
    $("#PostalZipCode").autotab_filter('alphanumeric');

    // allows only numeric input:
    // this keydown binding won't allow letters at all, the above autotab
    // numeric format simply removes anything typed that isn't within 0-9
    $("#phone_1,#phone_2,#phone_3,#CustField1").keydown(function(event) {
        // Allow: backspace, delete, tab, escape, and enter
        if ( event.keyCode == 46 || event.keyCode == 8 || event.keyCode == 9 || event.keyCode == 27 || event.keyCode == 13 || 
            // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) || 
            // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
                // let it happen, don't do anything
                return;
        } else {
            // Ensure that it is a number and stop the keypress
            if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
                event.preventDefault(); 
            }
        }
    });

    // automatically capitalize letters in postal code  
    $("#PostalZipCode").keyup(function() {
        $(this).val(($(this).val()).toUpperCase());
    });
});

Answer 1

I was able to get the submitHandler to execute after adding “cancel” class to the submit button which prevented validation onsubmit. I tried to set onsubmit: false but then invalid forms are allowed to submit. Strangely, setting onsubmit: true (default behavior) and adding class=”cancel” to the submit button triggers submitHandler when the form is valid and doesn’t allow invalid forms to be submitted.

Here’s my submitHandler which checks to see that validator.invalid is empty and there are no empty fields. This prevents submission while all fields are empty. I’m sure there’s a more elegant way to remove the custom ajax validation methods (there’s a $ charge associated with them) and let the form revalidate with the required rules before submit.

submitHandler: function(form) {
    var emptyFields = false;
    $(":input").each(function() {
        if ($(this).val() === "") emptyFields = true;
    });
    if ($.isEmptyObject(validator.invalid) && !emptyFields) { // all is valid, submit
        form.submit();
    } else {
        alert("Please correct some errors");
    }
}

Additionally, in order for form.submit() to work in Safari, I had to change its name from name=”submit” to name=”send” (something other than submit), see these links:
http://www.luqmanmarzuki.com/read/20101222/jquery_form_validation_not_submitting_in_safari.html
http://api.jquery.com/submit/#comment-106178333

Here’s another solution:
JQuery Validate – class="cancel" submit button only stops validation once