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

Posted 2023-05-09

【中文标题】具有多种形式的jQuery验证插件和模糊验证[重复]

【英文标题】：jquery validation plugin with multiple forms and validation on blur [duplicate]

【发布时间】：2018-05-25 08:44:43

【问题描述】：

我陷入了一个问题并且非常困惑。我正在为多个表单使用 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");

    );

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

【问题讨论】：

花了一些时间来解读您真正想要的：将默认的“惰性”验证行为更改为“急切”验证。关闭为重复：***.com/a/29521408/594235

【参考方案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");
        
    );
 );

【讨论】：

请注意，您不止一次将.validate() 附加到同一个表单。除了上面的类选择器之外，您还可以在页面加载时使用 $("#theForm").validate() 和 $("#theForm2").validate()。仅使用附加到任何单个表单的第一个实例，并且任何后续在同一表单上初始化的尝试都将被忽略。换句话说，您的一个实例是多余的，应该删除。

朋友 这就是我在插件站点的演示中看到的，当在同一页面上使用多个表单时。关于多次致电.validate() .. 可以做些什么来防止这种情况发生？

不要对我所说的感到困惑。使用 .each() 在 multiple 表单上调用 .validate() 非常好。但是，您在两个不同的时间将.validate() 附加到 SAME 表单的id 和class

so 而不是$(this).on("blur", ' i should use $form.on('blur'`对于每个输入类型字段？

天哪，这与我想告诉你的完全无关。查看.validate() 和仅.validate()。它一次只能附加到一个表格。但是，您在每种表格上都做了两次！一旦进入您的就绪事件处理程序，然后再次进入您的.each()。