3

我想我在 jquery 验证（bassistance）的远程规则功能中发现了一个错误。我用 jquery.validation 1.9.0 和 1.10.0 对其进行了测试。这是我的 HTML 和 JS：

<!DOCTYPE html>
<html lang="nl">
    <head>
        <meta charset="utf-8">
        <script src="jquery-1.7.1.min.js"></script>
        <script src="jquery.validate.js"></script>
    </head>
    <body>
        <script>
            $(document).ready(function() {
                window.validater = $("#SignUpForm").validate({
                    rules: {
                        "initials": {
                            required: true
                        },
                        "lastname": {
                            required: true
                        },

                        "phonenumber": {
                            required: true,
                            remote: { url: "/checkPhoneNumber.php", async:false }
                        }
                    },
                    messages: {
                        "initials": {
                            required: "U heeft uw voorletters niet ingevuld"
                        },
                        "lastname": {
                            required: "U heeft uw achternaam niet ingevuld"
                        },
                        "phonenumber": {
                            required: "U heeft uw telefoonnummer niet ingevuld",
                            remote: "U heeft geen geldig telefoonnummer ingevuld (formaat: +311230123456).",
                        }
                    }
                });
            });
        </script>
        <form enctype="" name="SignUpForm" method="POST" action="" class="fbForm " id="SignUpForm" novalidate="novalidate">
            <div class="fbElement fbTextfield ">
                <label for="initials">Voorletters <span class="require">*</span> </label>
                <input type="text" name="initials" value="" style="" title="" class="activePlaceholder" id="initials">
                <label class="error" generated="true" for="initials" style="display: none;"></label>
            </div>

            <div class="fbElement fbTextfield ">
                <label for="prefix">Tussenvoegsel </label>
                <input type="text" name="prefix" value="" style="" title="" class="activePlaceholder" id="prefix">
                <label class="error" generated="true" for="prefix" style="display: none;"></label>
            </div>

            <div class="fbElement fbTextfield ">
                <label for="lastname">Achternaam <span class="require">*</span> </label>
                <input type="text" name="lastname" value="" style="" title="" class="activePlaceholder" id="lastname">
                <label class="error" generated="true" for="lastname" style="display: none;"></label>
            </div>    

            <div class="fbElement fbTextfield ">
                <label for="phonenumber">Telefoonnummer <span class="require">*</span> </label>
                <input type="text" name="phonenumber" style="" value="+311230123456" class="activePlaceholder" id="phonenumber">
                <label class="error" generated="true" for="phonenumber" style="display: none;"></label>
            </div>

            <div style="" class="fbContainer  " id="navContainer">
                <button data-loading-text="Laden..." onclick="" value="Verder" name="SignupFB_NextFB_next" class="submit " type="Submit" id="SignupFB_NextFB_next">Verder</button>
            </div>
        </form>
    </body>
</html>

您可能会注意到：我在电话号码字段上有一个远程规则。remoterule 本身工作正常。出于测试目的，我的 checkPhoneNumber.php 包含：

<?php
$valid = 'false';
echo $valid;

我真的需要异步：假。否则，当我不先手动单击电话号码字段以触发 ajax 请求时，我将无法提交表单。这是 stackoverflow 上的一个已知问题。但是，当我添加 async:false 时，上面的字段中不会出现验证消息。phonenumber 字段下方的字段不存在此问题。当我将电话号码字段移到首字母字段上方时，验证消息没有问题。

有谁知道如何解决这个问题，或者知道如何解决？

提前致谢，

威廉

4

1 回答 1

0

我在 jquery.validate.js (v1.10.0 - 9/7/2012) 中发现，在验证所有规则时调用 showErrors 函数，并在远程规则完成时再次单独调用。

当远程规则完成并且调用 showErrors 函数时 this.errorList 将被重置。但此时 this.errorList 变量将包含先前的验证消息。

评论 this.errorList = []; 将解决上述问题。我不知道它是否会破坏其他任何东西。

编辑： 在提供的测试用例中它不会失败。

showErrors: function(errors) {
        if(errors) {
            // add items to error list and map
            $.extend( this.errorMap, errors );
            //this.errorList = [];
            for ( var name in errors ) {
                this.errorList.push({
                    message: errors[name],
                    element: this.findByName(name)[0]
                });
            }
            // remove items from success list
            this.successList = $.grep( this.successList, function(element) {
                return !(element.name in errors);
            });
        }
        if (this.settings.showErrors) {
            this.settings.showErrors.call( this, this.errorMap, this.errorList );
        } else {
            this.defaultShowErrors();
        }
    }
于 2012-10-11T10:26:17.520 回答