javascript - Jquery 不显眼的验证 : add class to label of invalid field

Question

我在 ASP.NET MVC 项目中使用 jQuery Unobtrusive Validation，并在 ViewModel 中的属性上使用验证属性。

我的表单中的部分 View 包含以下代码:

<div id="contact-form">
  <p>
    <label for="Name">Name</label>
    <span class="field-validation-error" data-valmsg-for="Name" data-valmsg-replace="true"><span for="Name" generated="true" class="">field is required</span></span> <br>
    <input class="input-validation-error" data-val="true" data-val-required="field is required" id="Name" name="Name" placeholder="Full Name" type="text" value="">
  </p>
</div>

问:如何使用 jQuery 将类添加到无效字段的标签，以便当验证消息出现在标签旁边时，标签也应为红色？

Answer 1

您可以处理模糊事件并检查该值是否有效

$('input[type=text], textarea').blur(function () {
  if (!$(this).valid()) {
    $(this).prevAll('label').css('color', 'red');
  }
});

如果跳过控件，您可能还需要检查提交事件并对每个输入、文本区域等重复相同的操作。