具有多种形式的jQuery验证插件和模糊验证[重复]

Question

我陷入了一个问题并且非常困惑。我正在为多个表单使用 jQuery 验证插件 https://jqueryvalidation.org/。

问题 1：我的模糊验证脚本工作正常，直到每个页面上只有一个表单要验证，但现在它专注于它可以找到的第一个表单。

问题 2： 在第二个或其他表单中单击“提交”按钮时，它会验证所有表单，而不仅仅是验证当前表单。

HTML 示例

<form id="theForm" class="formContainer">
<div class="formbox formbox-33">
    <input type="text" name="FirstName" class="inputField required">
    <label class="float-label">First Name:</label>
</div>
<button type="Submit" id="submitButton">Submit</button>
</form>

    <form id="theForm2" class="formContainer">
<div class="formbox formbox-33">
    <input type="text" name="FirstName" class="inputField required">
    <label class="float-label">First Name:</label>
</div>
<button type="Submit" id="submitButton">Submit</button>
</form>

<script type="text/javascript">
$(document).ready(function() {
// Initializing the forms present on current page
    $("#theForm").validate();
    $("#theForm2").validate();
});
</script> 

JQUERY 脚本

var $theForm = $(".formContainer"),
$form = $theForm.validate();

$theForm.on('blur', '.inputField', function(e){
        if( $(this).hasClass("errorMessage") && $(this).parent().not( "invalid" ) ) {
            $( this ).parent().addClass(" invalid");
            $( this ).parent().removeClass("inputValid");
        }
        if( $(this).hasClass("valid") ) {
            $( this ).parent().addClass(" inputValid");
            $( this ).parent().removeClass("invalid");
        }
    });

朋友们，我不能将 ID 用于表单或提交按钮，因为任何页面都可以包含一个或多个表单。

重置按钮功能工作正常，但相同的技术在用于模糊和提交按钮上的输入字段时不显示结果。

重置按钮功能

$( ".button-reset" ).click(function() {

        var parentFinder = '#' + $(this).parents('.formContainer').attr("id");
        var $FormReseter = $(parentFinder).validate();
        $FormReseter.resetForm();
        $(parentFinder + " .inputValid").removeClass("inputValid");
        $(parentFinder + " .invalid").removeClass("invalid");

    });

任何帮助将不胜感激。提前谢谢你。

Answer 1

我刚刚找到了一个解决方案，在每个循环中使用主窗体类。它似乎有效，但如果你的朋友能想出一个更好的解决方案，那就太好了

$(".formContainer").each(function(i, obj) {
        $form = $(this).validate();
$(this).on('blur', '.inputField', function(e){
        if( $(this).hasClass("errorMessage") && $(this).parent().not( "invalid" ) ) {
            $( this ).parent().addClass(" invalid");
            $( this ).parent().removeClass("inputValid");
        }
        if( $(this).hasClass("valid") ) {
            $( this ).parent().addClass(" inputValid");
            $( this ).parent().removeClass("invalid");
        }
    });
 });