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 SCRIPT

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

我刚刚找到了一个解决方案，在每个循环中使用主表单类。它似乎有效，但如果你的朋友可以提出更好的解决方案，那就很棒了

Object

jquery验证插件，具有多种形式和模糊验证

1 个答案: