Html.ValidationMessageFor()不呈现<span>元素

Question

我在MVC 3中使用Html.ValidationMessageFor已经很长时间了。突然之间，这个扩展不再适用于我，而只是在一个特定的视图中。扩展在<form>标记中使用，并且页面附加了jquery.validate.min.js和jquery.validate.unobtrusive.min.js (以及其他)。我检查了站点的其他页面，这些视图使用相同的调用，生成<span>元素。

下面是我使用的标记：

<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>

数据注释

    [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 --返回自定义消息的必需属性。在网站的其他地方工作。
• 带有自定义消息的DisplayNameLocalized - DisplayName属性。在其他地方工作。
• 等

默认情况下，此表单是隐藏的，并在用户单击某个按钮时显示。下面是附在页面上的脚本：

<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>

如果页面上有此格式的错误，则使用Javascript返回false：

$('#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

替换

<button id="btnSubmitAssistanceRequest" class="btn btn--primary">@Translation.Text("submit")</button>

使用

<input type="submit" id="btnSubmitAssistanceRequest" class="btn btn--primary" Text="@Translation.Text("submit")"/>

提交表单调用不显眼的验证。