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的{{1}}定位为目标。它将被忽略。您只能定位附加到.validate()的{{1}}个元素。

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

如何使用jQuery validate插件在非表单元素上验证输入

1 个答案: