3

jQuery オートコンプリート メソッドを使用する入力フィールドがあります。ユーザーはユーザー名の入力を開始し、結果のリストを取得します。結果を選択すると、このユーザーの詳細を含む入力フィールドがさらに表示されます (このデータはバックグラウンドで AJAX を使用して取得されます)。

また、オートコンプリート フィールドで選択したユーザー名が非表示の入力にコピーされます。提案リストからユーザー名を選択せず​​にユーザーがユーザー名を変更できないようにするため、これを行っています。equalToこれを行うには、検証にjQueryを使用しています。表示されているユーザー名入力フィールドの値と非表示の値を比較します。

そのため、ユーザーが表示されているユーザー名入力フィールドの値を (入力するだけで) 変更すると、リストから名前を選択する必要があることを示す通知が表示されます。これは実際にはうまく機能します。

しかし、私は奇妙な行動をしています。ユーザーがフォームを開いてユーザーを編集します。彼はユーザー名の入力を開始し、1 つを選択します (さらに多くの入力フィールドが表示され、非表示の入力が設定されます)。しかし、何らかの理由で、ユーザー名を選択する必要があるという通知が表示されます。このエラーは、次のフィールドをクリックするとすぐに消えます。明らかに、ユーザー名が選択された後、jQuery は入力を再度チェックしません。代わりに、フォームを再検証するために、キー押下または別のフォーム アクションを待ちます。

非表示の入力が設定された後、jQueryに強制的にフォームを再検証させる方法はありますか?

これは私の（短縮された）jQueryコードです：

$(document).ready(function() {
    // Autocomplete
    $("#username").autocomplete({
        source: function(request, response) {
            $.ajax({
                url: "http://localhost/users.php",
                contentType: "application/json; charset=utf-8",
                dataType: "jsonp",
                data: {
                    search: request.term,
                    uid: "ahatius" // This value is generated server side --> It just makes the list smaller by just selecting users relevant to this administrator
                },
                success: function(data) {
                    response($.map(data.persons, function(item) {
                        return {
                            label: item.username + " (ID: " + item.uid + ")",
                            value: item.username,
                            username: item.username,
                            groupnumber: item.groupnumber
                        }
                    }));
                }
            });
        },

        minLength: 0,

        // Write input values
        select: function(event, ui) {
            $("#checkUsername").val(ui.item.username);
            $("#groupnumber").val(ui.item.groupnumber);

            showAll(); // This just shows all other input fields, isn't relevant
        }
    })

    // Validation
    $("#useredit").validate({
        rules: {
            username: {
                equalTo: "#checkUsername"
            },
            groupnumber: {
                required: true,
                minlength: 2,
                number: true
            }
        },
        messages: {
            cnAntragsteller: {
                equalTo: "Please select a user from the dropdown!"
            },
            groupnumber: {
                required: "You need to specify a group number!",
                minlength: "The specified group number is too short!",
                number: "You have to specify a numeric value!"
            }
        },
        errorPlacement: function ($error, $element) {
            var name = $element.attr("name");

            $("#" + name + "Error").append($error);
        }
    })
})
4

2 に答える 2

2

それがあなたの要件を満たしているかどうかはわかりません。$("#useredit").valid()ただし、必要なイベントでフォームを簡単に再検証するために使用できます。また、このリンクをチェックして、onkeyup、onfocusout などの適切なプロパティがあるかどうかを確認することもできます。

問題はjqueryバリデーションのプロパティ「onfocusout」がデフォルトでtrueになっているためだと思います。また、ユーザー名を選択する前に onfocustout イベントがトリガーされます。したがって、次のように「onfocusout」をオーバーライドしてみてください。

$(form).validate({
    onfocusout:function(element){
         var dovalid ;
         // Do somethings to determine dovalid is true or false;
         if (dovalid){
            return $(element).valid();    
         }
         else{
            return true;
         }                          
    }
});
于 2012-07-10T06:42:53.233 に答える
0

最も美しい解決策ではないかもしれません。私はまだより良いアイデアを受け入れていますが、今のところ、ユーザーが選択されるとすぐにエラー要素の html をクリアします。

$("#usernameError").html("")

于 2012-07-11T05:15:36.630 に答える