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;

私は本当に async:false が必要です。そうしないと、最初に電話番号フィールドを手動でクリックしてajax-requestをトリガーしないと、フォームを送信できません。これは、stackoverflow の既知の問題です。ただし、 async:false を追加すると、上記のフィールドに検証メッセージが表示されません。phonenumber フィールドの下のフィールドには、この問題はありません。電話番号フィールドをイニシャル フィールドの上に移動すると、検証メッセージに問題はありません。

この問題を解決する方法を知っている人、またはウォークアラウンドを知っている人はいますか?

前もって感謝します、

ウィリアム

4

1 に答える 1

0

jquery.validate.js (v1.10.0 - 2012 年 9 月 7 日) で、すべてのルールが検証されたときに showErrors 関数が呼び出され、リモート ルールが終了したときに個別に呼び出されることがわかりました。

remote-rule が終了し、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 に答える