Why isn't my jQuery validation working? - asp.net-mvc

Question

I have this in my Web.config:
<appSettings>
<add key="ClientValidationEnabled" value="true" />
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
My view model:
public class CustomerViewModel
{
public Guid Id { get; set; }
[Required]
[DisplayName("First Name")]
public string FirstName { get; set; }
}
My view:
#using (Html.BeginForm(MVC.Customers.Edit(), FormMethod.Post, new { id = "edit-customer" }))
{
#Html.AntiForgeryToken()
<div class="form-horizontal">
<hr />
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
#Html.HiddenFor(model => model.Id)
<div class="form-group">
#Html.LabelFor(model => model.FirstName, htmlAttributes: new { #class = "control-label col-md-2" })
<div class="col-md-10">
#Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { #class = "form-control" } })
#Html.ValidationMessageFor(model => model.FirstName, "", new { #class = "text-danger" })
</div>
</div>
...
</div>
}
And this is how the "form-group" div gets rendered:
<div class="form-group">
<label class="control-label col-md-2" for="FirstName">First Name</label>
<div class="col-md-10">
<input id="FirstName" class="form-control text-box single-line" name="FirstName" value="" type="text" data-val-required="The First Name field is required." data-val="true">
<span class="field-validation-valid text-danger" data-valmsg-replace="true" data-valmsg-for="FirstName"></span>
</div>
</div>
And I'm loading the jQuery scripts in this order:
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery-ui-1.10.4.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>
The form is shown using an ajax call when a button is clicked. It is also submitted with ajax. This all works fine when I'm not doing any validation. I added validation and I can't get it to trigger before the ajax call. Here's what I'm doing in the click handler that submits the form:
var formToSubmit = $('#' + attrData.formIdToSubmit);
if (!formToSubmit.valid()) {
return false;
}
formData = formToSubmit.serialize();
...
I expect formToSubmit.valid() to trigger the validation and return false when nothing is entered in the FirstName field. In practice it returns true and then validation fails on the server, ModelState.IsValid returns false as expected. In looking through the jQuery validation docs it looks like it expects a required attribute, like this:
<input id="FirstName" class="form-control text-box single-line" name="FirstName" value="" type="text" data-val-required="The First Name field is required." data-val="true" required>
If I use dev tools to add that and then click the submit button then the call to formToSubmit.valid() returns false as expected, however the error message doesn't end up in the span created by #Html.ValidationMessageFor, it ends up in a newly added label that looks like this:
<label for="FirstName" class="error">This field is required.</label>
What am I doing wrong?

Answer 1

Here is how I ended up fixing it:
var formToSubmit = $('#' + attrData.formIdToSubmit);
formToSubmit.removeData("validator")
.removeData("unobtrusiveValidation");
$.validator.unobtrusive.parse(formToSubmit);
if (!formToSubmit.valid()) {
return;
}
formData = formToSubmit.serialize();
...