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

Question

我有一个正在ASPX中构建的站点。不幸的是，由于这个事实，我实际上无法使用<form>标记来包装我的输入，而且据我所见，jQuery Validation插件只支持在<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()的调用都将被忽略。