javascript - JQuery 验证插件帮助

Question

我正在尝试使用 JQuery 的验证插件来验证表单，但我希望它不仅显示错误消息，而且还更改其上方 td 的 css。我目前有

function myErrorHandle(element) {
    element.closest("td").addClass("fsValidationError");
}
$("#fsForm691575").validate({
    errorPlacement: myErrorHandle,
    rules: {
        field7014601: {
            required: true
        }
});

其中 fsForm691575 是我的表单，field7014601 只是一个名称字段。我只是根据我发现的另一个建议对 myErrorHandle 函数进行了修改，所以如果我可以取消它但仍能获得预期的效果，那就太好了。

谢谢

Answer 1

我无法针对您的情况提供特定的答案(无 HTML)，但我可以向您展示如何更改验证的默认“突出显示”操作。

例如，给定以下 HTML:

<form action="#">
  <table>
    <tr>
      <td>
        <input id='firstname' name='firstname' class='required' />
      </td>
    </tr>
    <tr>
      <td>
        <input id='lastname' name='lastname' class='required' />
      </td>
    </tr>
  </table>
  <input type="submit" value="submit" />
</form>

您可以配置验证以将父 tr 着色为红色:

$("form").validate({
  errorClass: "error",
  highlight: function(element, errorClass, validClass) {
    $(element).closest("tr")
      .addClass(errorClass)
      .removeClass(validClass);
  },
  unhighlight: function(element, errorClass, validClass) {
    $(element).closest("tr")
      .removeClass(errorClass)
      .addClass(validClass);
  }
});

示例:http://jsbin.com/afoju5/3/edit

如果您需要更精细地控制显示错误时发生的情况，请查看 showErrors 选项。