javascript - 如何使用 jQuery 验证插件在 keyup 上验证非表单元素中的输入

Question

我有一个正在 ASPX 中构建的网站。不幸的是，由于这个事实，我实际上无法使用 <form>标签来包装我的输入，据我所知，jQuery Validation Plugin仅支持验证<form>内的输入。有没有办法使用指定的规则来验证 keyup 上的这些输入无需将它们包裹在 <form> 中标签？

$(function() {
  $('.form-container').validate({
    rules: {
      useremail: {
        required: true,
        email: true
      },
      userstate: {
        required: true,
        maxlength: 2
      }
    },
    messages: {
      useremail: 'Please enter a valid email',
      userstate: 'Please enter your state',
    }
  });
  
  $('.form-container input').on('keyup', function() {
    $(this).validate();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.18.0/jquery.validate.min.js"></script>

<div class="form-container">
  <input type="text" name="useremail" placeholder="Email" />
  <input type="text" name="userstate" placeholder="State" maxlength="2" />
</div>

Answer 1

您不能使用嵌套表单，这是无效的 HTML，并且您必须将 .validate() 附加到 form 容器。没有解决方法。

您还使用了 .validate() ，这都是错误的。由于这是插件的主要初始化方法，因此将其包装在 keyup 处理程序中是不正确的。另外，该插件已经使用 keyup 事件来触发验证。

不，您不能将表单输入元素放入 div 中，然后将该 div 定位到附加到 .validate() 的目标。它将被忽略。您只能定位附加到 .validate() 的 form 元素。

此外，由于您使用的是 ASP，因此您可以利用其内置的 Unobtrusive Validation 插件，该插件会根据您的数据属性自动构造和调用 .validate() 方法。请记住，如果您遵循此路线，则无法自己调用 .validate() 。该插件只允许一次调用，一旦初始化，所有后续对 .validate() 的调用都将被忽略。