Question

我想我在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>

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

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

我真的需要async：false。否则，当我不首先手动单击phonenumber字段以触发ajax请求时，我无法提交表单。这是stackoverflow上的已知问题。但是，当我添加async：false时，上面的字段没有验证消息。在phonenumber字段下面的字段没有这个问题。当我将phonenumber字段移动到initials-field之上时，验证消息没有问题。

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

提前致谢，

威廉

Answer 1

我在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(); } }

jquery验证远程bug（async = false）

1 个答案: