如何使用 jQuery 验证插件验证非表单元素中的输入

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() 的后续调用都将被忽略。

如何使用 jQuery 验证插件验证非表单元素中的输入

How to validate input, in non-form element, on keyup with jQuery validate plugin

javascript

asp.net

jquery

jquery-validate