jQuery Validator addMethod only working after second call

Question

I'm trying to validate an input using jquery validator 'addMethod'. The main goal is to check if the current user id exists in the system and if it does a error message is displayed. To check if the user exists I make a ajax call to my controller and it returns true or false.

$("input[name='VATNumber']").blur(function () {

        var tbody = $(this).showLoading();

        var vatnumber = $(this).val();

        var svcUrl = "@Url.Action("CheckUserExistance", "User")";

        $.ajax({
            url: svcUrl + "?vatNumber=" + vatnumber,
            type: "GET",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            async: true,
            cache: true,
            error: function (xhr, err) {
                tbody.hideLoading();
                $.jGrowl("ERROR checking user.", { life: 5000, group: "error" });
            },
            success: function (result) {
                tbody.hideLoading();
                displayErrorMessage(result.data);

                //console.log(result);
                //if (result.data == false) { displayErrorMessage(); }
            }
        });

        function displayErrorMessage(result) {
            console.log(result);
            jQuery.validator.addMethod("checkUser", function (value) {
                return result == false;
            }, "User already exists.");

            jQuery.validator.classRuleSettings.checkUser = { checkUser: true };

            $("input[name='VATNumber']").validate();
        }

    });

The problem is that the validator is not displaying the message at the right time, even so the 'result' variable is right.

Can someone help, please?

UPDATE

I've tried with this code and it still doesn't work. The request is not considered.

var vatnumber = $("input[name = 'VATNumber']").val(),
        officeid = parseInt($("input[name='OfficeID']").val(), 10);
var svcUrl = "@Url.Action("CheckUserExistance", "User")";

    $('#mainForm').validate({
        rules: {
            VATNumber: {
                required: true,
                VATNumber: true,
                remote: {
                    url: svcUrl,
                    type: "post",
                    data: {
                        vatNumber: vatnumber,
                        officeId: officeid
                    }
                }
            }
        },
        messages: {
            VATNumber:  {
                remote: "User already exists."
            }
        }
    });

---

I'm using ASP.NET MVC and Bootstrap

HTML

    <div class="par control-group">
                    <label class="control-label" for="VATNumber">NIF</label>
                    <div class="controls">

<input class="input-large" data-val="true" data-val-maxlength="MaxLengthAttribute" data-val-maxlength-max="50" id="VATNumber" name="VATNumber" type="text" value="2345678">
                        <span class="field-validation-valid" data-valmsg-for="VATNumber" data-valmsg-replace="true"></span>
                    </div>
                </div>

SCRIPT

$(document).ready(function () {

    //$("input[name='VATNumber']").addClass("checkUser");

    var vatnumber = $("input[name = 'VATNumber']").val(),
        officeid = parseInt($("input[name='OfficeID']").val(), 10);

    var svcUrl = "@Url.Action("CheckUserExistance", "User")";

    console.log(svcUrl + " " + vatnumber);

    $('#mainForm').validate({
        rules: {
            VATNumber: {
                required: true,
                remote: {
                    url: svcUrl,
                    type: "post",
                    // for troubleshooting
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        console.log('status: ' + textStatus); // status
                        console.log('error: ' + errorThrown); // error
                    },
                    complete: function (jqXHR, textStatus) {
                        // fires after the request, even if there is an error
                        console.log('ajax is finished: ' + textStatus);
                    }
                }
            }
        },
        messages: {
            VATNumber: {
                remote: "User already exists."
            }
        }
    });
});

Answer 1

Your code...

$("input[name='VATNumber']").blur(function () {

    ....

    $.ajax({
        ....
    });

    function displayErrorMessage(result) {

        jQuery.validator.addMethod("checkUser", function (value) {
            return result == false;
        }, "User already exists.");

        jQuery.validator.classRuleSettings.checkUser = { checkUser: true };

        $("input[name='VATNumber']").validate();
    }

});

Problems:

1. Everything is inside a blur handler. I'm not sure why you need this when the jQuery Validate plugin already uses a focusout handler by default. You can eliminate the blur() handler entirely.

2. You've attached the .validate() method to an input. You cannot do this. The .validate() method only gets attached to the <form> element.

3. You've put the .validate() method inside of a displayErrorMessage function which is nested inside your blur handler function. However, the .validate() method is used for initializing the plugin on your form and should be called once and only on DOM ready.

4. You've also put .addMethod() inside of a displayErrorMessage function which is nested inside your blur handler function. However, the .addMethod() method is used for creating/initializing the new rule and should be called once and only on DOM ready. In this case, your new rule/method does not appear to be used anywhere, not needed, and not even properly constructed.

5. Your .ajax() is completely independent of the jQuery Validate plugin. However, the plugin already contains an ajax method called remote, where its sole function is to remotely check with the server; to check if a username already exists, for example.

"The main goal is to check if the current user id exists in the system and if it does a error message is displayed."

Then you don't even need the .ajax() or the .addMethod() method at all. Simply properly implement the remote rule/method.

$(document).ready(function() {

    $('#myform').validate({
        rules: {
            VATNumber: {
                required: true,
                remote: {
                    // your other options
                }
            }
        }
    });

});

Your server-side code can return a true or false indicating pass or fail validation. Alternatively, if you return a JSON encoded string, then it fails validation and the JSON string automatically becomes the validation message.

Also see: jQuery Validate remote method usage to check if username already exists

---

EDIT:

Based on edited OP and his comments...

$(document).ready(function() {  // <-- everything inside a DOM ready handler?

    $('#mainForm').validate({  // <-- 'mainForm' is ID of your <form></form>?
        rules: {
            VATNumber: {
                required: true,
                // VATNumber: true, // <-- NO SUCH METHOD/RULE
                remote: {
                    url: svcUrl, // <-- positively verify the URL
                    type: "post",
                    data: {
                        vatNumber: vatnumber,  // <-- redundant
                        officeId: officeid
                    },
                    // for troubleshooting
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        console.log('status: ' + textStatus); // status
                        console.log('error: ' + errorThrown); // error
                    },
                    complete: function(jqXHR, textStatus) {
                        // fires after the request, even if there is an error
                        console.log('ajax is finished: ' + textStatus);
                    }
                }
            }
        },
        ....
    });

});

Answer 2

Despite all the help from @Sparky (thank you so much) and after running out of ideas, I talked to a friend and he said to try calling the ajax inside the addMethod. And it worked better than the first attempt. So here it is:

$(document).ready(function () {

    $("input[name='VATNumber']").addClass("checkUser");

    var vatnumber = $("input[name = 'VATNumber']").val(),
        officeid = parseInt($("input[name='OfficeID']").val(), 10);

    var svcUrl = "@Url.Action("CheckUserExistance", "User")";

    jQuery.validator.addMethod("checkUser", function (value, element) {
        var exists = false;
        $.ajax({
            url: svcUrl + "?vatNumber=" + value
                        + "&officeId=" + officeid,
            type: "GET",
            async: false,
            cache: false,
            error: function (xhr, err) {
                $.jGrowl("ERROR checking user.", { life: 5000, group: "error" });
            },
            success: function (result) {
                exists = result;
            }
        });
        return exists;
    }, "User already exists.");
    //});

    jQuery.validator.classRuleSettings.checkUser = { required: true, checkUser: true };
});