Html.ValidationMessageFor() not rendering <span> element - asp.net-mvc

Question

I've been using Html.ValidationMessageFor for quite a long time in MVC 3. All of a sudden this extension is no longer working for me, but only in a particular view. The extension is used in a <form> tag and the page has the jquery.validate.min.js and jquery.validate.unobtrusive.min.js attached (among others). I've checked other pages of the site, and those views use the same call and the <span> element is generated.
Here is the markup I'm using:
<form id="assistanceRequestDiv" class="form-group js-more-assistance js-hidden">
<p>#Translation.TextByDomain("Assistance", "need-further-assistance-contact-customer-support")</p>
<div class="content-block left-text-children">
<div class="content-block__quarter-column">
#Html.LabelFor(x => x.AssistanceRequestFirstName)
#Html.ValidationMessageFor(x => x.AssistanceRequestFirstName)
#Html.TextBoxFor(x => x.AssistanceRequestFirstName, new {#class = "form-control", required = "required"})
</div>
<div class="content-block__quarter-column">
#Html.LabelFor(x => x.AssistanceRequestLastName)
#Html.ValidationMessageFor(x => x.AssistanceRequestLastName)
#Html.TextBoxFor(x => x.AssistanceRequestLastName, new {#class = "form-control", required = "required"})
</div>
<div class="content-block__quarter-column">
#Html.LabelFor(x => x.AssistanceRequestPhoneNumber)
#Html.ValidationMessageFor(x => x.AssistanceRequestPhoneNumber)
#Html.TextBoxFor(x => x.AssistanceRequestPhoneNumber, new {#class = "form-control"})
</div>
<div class="content-block__quarter-column set-vertical-align-bottom">
<button id="btnSubmitAssistanceRequest" class="btn btn--primary">#Translation.Text("submit")</button>
</div>
</div>
</form>
Data Annotations
[RequiredLocalized, DisplayNameLocalized("first-name")]
public string AssistanceRequestFirstName { get; set; }
[RequiredLocalized, DisplayNameLocalized("last-name")]
public string AssistanceRequestLastName { get; set; }
[RequiredLocalized, DisplayNameLocalized("phone-required")]
[RegularExpressionLocalized(#"(?:(?:\+?1\s*(?:[.-]\s*)?)?(?:(\s*([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]‌​)\s*)|([2-9]1[02-9]|[2-9][02-8]1|[2-9][02-8][02-9]))\s*(?:[.-]\s*)?)([2-9]1[02-9]‌​|[2-9][02-9]1|[2-9][02-9]{2})\s*(?:[.-]\s*)?([0-9]{4})", "please-enter-a-valid-10-digit-phone-number", "Assistance")]
public string AssistanceRequestPhoneNumber { get; set; }
RequiredLocalized - Required attribute that returns a custom message. Works in other places of the site.
DisplayNameLocalized - DisplayName attribute with custom message. Works in other places.
Etc
This form is hidden by default and shown when the user clicks a certain button. Here are the scripts that are attached to the page:
<script src="/Scripts/jquery-1.8.3.min.js"></script>
<script src="/Scripts/jquery-ui-1.10.4.custom.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/Scripts/jquery.validate.extensions.js"></script>
<script src="/Scripts/Shared/jQueryGlobalSettings.js"></script>
Using Javascript to return false if there are errors on the page in this format:
$('#btnSubmitAssistanceRequest').click(function (e) {
var $answer = $('.js-title');
var $reqFirstName = $('#AssistanceRequestFirstName');
var $reqLastName = $('#AssistanceRequestLastName');
var $reqPhoneNumber = $('#AssistanceRequestPhoneNumber');
// Check for empty fields
if ($reqFirstName.val().trim() == "") {
showErrorMessage($reqFirstName, 'First Name is required.');
} else {
clearErrorMessage($reqFirstName);
}
if ($reqLastName.val().trim() == "") {
showErrorMessage($reqLastName, 'Last Name is required.');
} else {
clearErrorMessage($reqLastName);
}
if ($reqPhoneNumber.val().trim() == "") {
showErrorMessage($reqPhoneNumber, 'Phone Number is required.');
} else {
clearErrorMessage($reqPhoneNumber);
}
// check if validation errors were thrown
if ($(".field-validation-error").length) return false;
$.post('/api/[obfuscated]/[obfuscated]', { answer: $answer.text(), firstName: $reqFirstName.val(), lastName: $reqLastName.val(), phoneNumber: $reqPhoneNumber.val() }, function (data) {
if (data.success) {
$('.request-assistance-success').css('display', 'inline');
$(".feedback-container").slideUp(400);
} else {
$('.request-assistance-failure').css('display', 'inline');
$(".feedback-container").slideUp(400);
}
});
e.preventDefault();
return true;
});

Answer 1

Replace
<button id="btnSubmitAssistanceRequest" class="btn btn--primary">#Translation.Text("submit")</button>
with
<input type="submit" id="btnSubmitAssistanceRequest" class="btn btn--primary" Text="#Translation.Text("submit")"/>
Submit form invokes the unobtrusive validations.