jQuery Validate is not executing while using Unobtrusive Validation

Question

I'm using ASP.NET MVC and I have jQuery, jQuery validate, jQuery validate.config, jQuery validate unobtrusive, unobtrusive ajax and other libraries in my bundle. I have a form in my page and has some fields inside of it. It has a button of type button and when the user clicks the button I'm trying to do some stuff and then do a $(form).submit(), which I want it to be intercepted by the submithandler in the jQuery validate method and instead of submitting the form it will do a ajax post to my server. The reason I want to use the jQuery.validate method is that I have a lot of conditional required fields and other validations inside the form. But for some reason the jQuery validate is not executing/firing at all and the form is getting submitted instead of being intercepted by the submit handler. I have no idea why its not working if I setup everything correctly. Here is my call of the jQuery validate method. I never see the alert saying is good.

$('form[name="submitCheckoutForm"]').validate({
    debug: true,
    rules: {
        "Password": {
            required: true
        }
    },
    submitHandler: function (form) {
        //actions.SubmitCheckout();
        alert('is good');
        return false;
    }
});

Answer 1

If you're using the Unobtrusive Validation plugin, then you cannot also call jQuery Validate's .validate() method.

Why?

1. The Unobtrusive Validation plugin automatically constructs the .validate() method based on the various data attributes in your form.

2. The jQuery Validate plugin does not allow the .validate() method to be called more than once on the same form. So since you're already using Unobtrusive Validation to construct .validate(), your other call to .validate() will be totally ignored.

Answer 2

Please use the required attribute instead

<input type="password" required>