0

簡単な登録フォームには、「優先ログインID（ユーザー名）」フィールドがあります。ユーザーが電子メールを入力するとすぐに、入力したユーザー名（既に存在するかどうか）をデータベース値と比較して検証します。このために、jqueryの$.ajaxメソッドを使用してサーバー呼び出しを行っています。

<script>
$('#txtPreferredLogin').focusout(function () {
            $.ajax({
                type: "POST",
                url: "../Login.aspx/CheckUserName",
                async: false,`enter code here`
                data: "{userName: '" + $('#txtPreferredLogin').val() + "' }",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (response) {
                    $('#valid').html("<img src='Images/waiting.gif' alt='Checking username!'>");
                    var delay = function () {
                        AjaxSucceeded(response);
                    };
                    setTimeout(delay, 500);
                },
                failure: function (response) {
                    alert(response.d);
                }
            });
        });

        function AjaxSucceeded(result) {
            if (result.d == true) {
                $('#valid').html("<img src='Images/2_Not.png' alt='Username taken!'>");
            }
            else {
                $('#valid').html("<img src='Images/1_available.png' alt='Username available!'>");
            }
        }

        $.validator.addMethod('notNone', function (value, element) {
            return (value != '0');
        });

        $(function () {
            $("#regi1").validate(
            {
                rules:
                {
                    ddlCity:
                      {
                          required: true,
                          notNone: true
                      },
                    txtDOB:
                      {
                          required: true,
                          dpDate: true
                      }
                },
                messages: {
                    ddlCity: "Please select city",
                    txtDOB: "Please enter a valid date (dd-mm-yyyy)"
                }
            });
        });

</script>

サーバー側のコードは

public bool getVal(string userName)
        {
            var query = from p in context.tblBasicDetails
                        where p.LoginId == userName.Trim()
                        select p;
            if (query.Any())
            {
                return true;
            }
            else
            {
                return false;
            }
        }

        [WebMethod]
        public static bool CheckUserName(string userName)
        {
            Login l = new Login();
            return (l.getVal(userName));
        }

これで、ユーザー名が使用できない場合、使用できないというメッセージ（画像）が表示されます。しかし、これらのフィールドの下に[保存]ボタンがあり、クリックするとフォーム全体が検証されます。つまり、ユーザー名が使用できない場合を除いて、すべてのフィールドが有効になるまでページをポストバックしません。ユーザー名が利用できない場合は、ポストバックを実行したくありません。コードでどのような変更を行う必要がありますか？

4

2 に答える 2

1

Riazが言ったように、リモート検証は非常に役立ちますが、あなたの場合はすでにユーザー名をチェックしているので、サーバーに再度アクセスする必要はありません。

jqueryには、使用できる.data関数があります。

function AjaxSucceeded(result) {
    if (result.d == true) {
        $('#valid').html("&lt;img src='Images/2_Not.png' alt='Username taken!'>");
        $("#txtPreferredLogin").data("available", false); //add data
    } else {
        $('#valid').html("&lt;img src='Images/1_available.png ' alt='        Username available!'>");
        $("#txtPreferredLogin").data("available", true); //add data
    }
}

//add validator
$.validator.addMethod('
        available ', function(value, element) {
    return $(element).data("available");
});



$(function() {
    $("#regi1").validate({
        rules: {
            txtPreferredLogin: {
                required: true,
                available: true
            },
            ddlCity: {
                required: true,
                notNone: true
            },
            txtDOB: {
                required: true,
                dpDate: true
            }
        },
        messages: {
            ddlCity: "Please select city",
            txtDOB: "Please enter a valid date (dd-mm-yyyy)"
        }
    });
});
于 2012-07-04T06:27:06.017 に答える
0

jQueryフォーム検証を使用している場合は、リモート検証を使用する必要があります。検証フレームワークによって提供されます

http://bassistance.de/jquery-plugins/jquery-plugin-validation/

http://ceedubs.github.com/blog/2011/11/22/custom-remote-validation-with-jquery/

これがお役に立てば幸いです

于 2012-07-04T06:00:19.867 に答える