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

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