Question

我正在使用jQuery Validator插件来验证简单的联系请求表单。要求是：

在表单提交和onfocusout上进行验证。
短信被放置在字段标题中以进行悬停。这里省略了这部分，因为它不是问题的一部分。
在提交表单时，如果发现任何错误，则会出现一个对话框，说明找到的错误数量以及返回表单的说明。

我遇到的问题是validate的invalidHandler事件。如果我加载表单然后单击“提交”，我将按预期获得对话框。当我在函数中设置断点或简单警报时，我知道它会触发3次。

此外，我认为invalidHandler事件仅在表单提交时触发。如果我输入一个字段然后将其留空，则onfocusout将按预期触发，但随后invalidRander将再次触发，从而打开对话框。我从验证中删除了onfocusout事件，但每次都会触发。

旁注：关于对事件的额外调用以及意外事件，对话框中的格式化是关闭的，整个内部脚本大约是10px宽。

我搜索并尝试了所有我能想到的。代码在下面，我绊倒的任何想法？提前谢谢！

HTML

                <form id="kontaktform" name="kontaktform" method="post" action="">
                    <p>
                        <input type="radio" name="rblType" id="rb_0 tabindex="1" value="1" /> Item 1<br />
                        <input type="radio" name="rblType" id="rb_1 tabindex="2" value="2" /> Item 2<br />
                        <input type="radio" name="rblType" id="rb_2 tabindex="3" value="3"/> Item 3<br />                       </p>
                    <fieldset id="fs_pers">
                        <legend>Pers&#246;nliche Informationen</legend>
                        <div>
                            <label for="txtVorname">Vor-/Nachname:</label>
                            <select name="ddlSal" id="ddl_sal">
                                <option value="1">Herr</option>
                                <option value="2">Frau</option>
                            </select>&nbsp;
                            <input type="text" name="txtFName" id="txtFName" maxlength="50" tabindex="6" />&nbsp;
                            <input type="text" name="txtLName" id="txtLName" maxlength="50" tabindex="7" /><span class="req">*</span>
                        </div>
                        <div>
                            <label for="txtFirma" id="lbl_firma" class="lblDisabled">Firma</label>
                            <input type="text" name="txtFirm" id="txtFirm" maxlength="50" tabindex="8" style="width: 450px;" class="txtDisabled disabled="disabled" /><span id="req_firm" class="req hide">*</span>
                        </div>
                        <div>
                            <label for="txtAdresse">Adresse:</label>
                            <input type="text" name="txtAddr" id="txtAddr" maxlength="100" tabindex="9" style="width: 450px;" /><span class="req">*</span>
                        </div>
                        <div>
                            <label for="txtPLZ">PLZ/Ort:</label>
                            <input type="text" name="txtPostal" id="txtPostal" class="plz" maxlength="10" tabindex="10" style="width: 60px" />&nbsp;
                            <input type="text" name="txtCity" id="txtCity" maxlength="50" tabindex="11" style="width: 380px;" /><span class="req">*</span>
                        </div>
                        <div>
                            <label for="txtTele">Telefon:</label>
                            <input type="text" name="txtTele" id="txtTele" maxlength="50" tabindex="12" class="contactinfo defaultText" style="width: 450px;" /><span class="req">*</span>
                        </div>
                        <div>
                            <label for="txtEmail">E-Mail:</label>
                            <input type="text" name="txtEmail" id="txtEmail" maxlength="75" tabindex="13" class="contactinfo defaultText" style="width: 450px;" /><span class="req">*</span>
                        </div>
                    </fieldset>
                    <fieldset id="fs_question">
                        <legend>Nachrichten<span class="req">*</span></legend>
                        <div>
                            <textarea name="txtComments" id="txtComments" tabindex="14></textarea>
                        </div>
                    </fieldset>
                    <div class="buttonDiv">
                        <input type="submit" name="btnSubmit" tabindex="16" id="btnSubmit" value="Senden..." />
                    </div>
                </form>
                <div id="diverror" style="display: none" title="Fehler Gefunden">
                    <p id="divmsg"></p>
                </div>

以下是具体验证jQuery信息：

var rqTxt = {
    required: true,
    minlength: 1
}
$('#kontaktform').validate({
    debug: true,
    onfocusout: function (element) {
        $(element).valid();
    },
    errorPlacement: function (error, element) {
        return true;
    },
    errorClass: 'error',
    rules: {
        txtFName: rqTxt,
        txtLName: rqTxt,
        txtComments: {
            required: true,
            minlength: 10,
            maxlength: 1000
        },
        txtTele: {
            require_from_group: [1, ".contactinfo"]
        },
        txtEmail: {
            email: true,
            require_from_group: [1, ".contactinfo"]
        }
    },
    invalidHandler: function (form, validator) {
        var errors = validator.numberOfInvalids();
        if (errors) {
            $('#divmsg').html('Sie haben {0} Fehler in Ihrer Kontaktanfrage. Bitte &#252;berpr&#252;fen Sie die Formulare und versuchen Sie, Ihre Anfrage erneut zu senden.'.replace('{0}', errors));
            $('#diverror').dialog({
                dialogClass: 'diverror',
                modal: true,
                buttons: [{
                    text: "Schließen",
                    "class": "btnClass",
                    click: function () {
                        $(this).dialog("close");
                    }
                }]
            });
            $('#diverror').dialog('option', 'title', errors + ' Fehler Gefunden');
        }
    },
    submitHandler: function (form) {
        if ($(form).valid() && confirm('Sind Sie sicher?')) {
            form.submit();
            return false;
        }
    }

});

（我的24小时等待期结束后，将我的“回答”转移到这个问题的实际答案。）

Answer 1

好的，感谢Sparky的提示，以及在Sparky评论1.11.1之后，在Github上发布的针对require_from_group错误的修复内容，我找到了答案。

首先是我设置了验证器错误（重要的是errorPlacement回调。

其次似乎是问题的复杂因素是require_from_group错误。我最初根据问题412的问题跟踪器的建议更新了additional-methods.js文件（参见上面的链接评论），但如果我将任何一个分组字段聚焦，然后通过移动模糊它，那仍然会导致出现对话框到另一个字段或从页面中删除焦点。

然后我重新访问了该页面，发现了以下内容：

Fix require_from_group and skip_or_fill_minimum - e5207d6

修复程序在那里，我剪切了它并使用新代码更新了additional-methods.js文件，现在它按预期工作。

感谢您的提示！

invalidHandler多次触发

1 个答案: