Using unobtrusive validation works on individual elements but not the whole form

Using Asp.Net MVC3 with unobtrusive validation. I have a form that has a few input fields. One of the fields is pretty simple:

<input id="Name" class="valid" type="text" value="" name="Name" data-val-required="Enter your name." data-val-length-min="5" data-val-length-max="50" data-val-length="Enter a valid name." data-val="true">

I then have some js that validates the form and submits it only if client-side validation passes as in:

var $form = $('#contact_form');
var formAction = $form.attr('action');
var serialized = $form.serialize();

if ($form.validate().valid()) {...

Now the last line always returns true (yes I have unobtrusive enabled). However if I change the last line to:

if ($form.validate().element('#Name')) { ...

It works great and returns false. I have many fields and don't want to iterate over each one and am confused as to why when validating the whole form it says true but validating each individual element returns false correctly.

Things I tried: - reparsing the the form via unobtrusive's $.validator.parse(... to开发者_如何转开发 no avail. It's not a dynamic form and gets rendered when the page loads.

Note: I also checked that jquery (v1.6.2) jquery.validate.min.js (v1.8.1) and jquery.validate.unobtrusive.min.js are loaded in the browser.

You don't have to call .validate() but directly .valid():

if ($form.valid()) {
    ...
}