如何使用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()所有后續調用將被忽略。