First Click shows validation error and doesn't work. Second click it works fine

Question

I have following JS

jQuery(document).ready(function() {
    jQuery("#form").validate({

        onfocusout: false,
        onkeyup: false,
        errorPlacement: function (error, element) {
            jQuery(element).tooltipster(tooltipster_config);
            jQuery(element).tooltipster('content', jQuery(error).text());
            jQuery(element).tooltipster('show');
        },

        success: function (label, element) {
            jQuery(element).tooltipster('hide');
        },

        rules: {
            'user': {
                required: true,
                remote: {
                    url: URL,
                    type: "get",
                    async: "false",
                    data: {
                        user: function () {
                            return jQuery("input[name=user]").val();
                        }
                    }
                }

            },
         },

messages: {
    'user': {
        required: 'Enter user ID',
            remote: 'No User exists'
    }
}
});


jQuery("button[id=submit]").click(function (e) {
    e.preventDefault();
    if (jQuery("#form").valid()) {
        jQuery("form").submit();
    }
  });
});

In the above JS i am trying to validate a form field called 'user'. If i enter a wrong user id as per the rules defined it displays 'No User exists'. But when i correct user id to valid user id, on the first click of submit i still get 'No User exists' error, but on clicking submit second time it works fine.

I also tried 'on' function instead of 'click' but the error still persists. Please let me know where i am getting it wrong.

Answer 1

Try something like this:

$("#form").validate({
    rules:
    {
        user:
        {
            required: true,

            // Remote call
            remote: {
                url: 'process.php',  // On the basis of some condition this return either "true" or "false"
                type: 'post',
                data: {
                    user: function() {
                    return $( "#user" ).val();
                    }
                }
            }
        } 
    }
    messages:
    {
        user :
        {
            required: 'Enter user ID',
            remote: 'No User exists'
        }
    }
});