0

jQuery検証(プラグイン)とajaxを使用してサーバーにデータを送信することを組み合わせようとすると、次のような問題が発生しました。

この jQuery メソッドを使用して、データをサーバーに独自に投稿するだけであれば、すべて問題ありません。

function doAjaxPost() {
    // get the form values
    var name = $('#name').val();
    var pswd = $('#pswd').val();

    $.ajax({
    type: "POST",
    url: "${pageContext. request. contextPath}/loginUser.htm",
    data: "name=" + name + "&pswd=" + pswd,

    success: function(response){    
        // we have the response
        if(response.status == "OK") {
            $('#info').html("User has been added to the list successfully.<br>"+
                                "The User Details are as follows : <br> Name : "+ 
                                response.result.name + " <br> Password: " + response.result.pswd);
            $('#name').val('');
            $('#pswd').val(''); 
        } else {
            $('#info').html("Sorry, there is something wrong with the data provided")
        }
    },
    error: function(e){
        alert('Error: ' + e);
    }
    });

}// end of doAjaxPost

しかし、jquery.validate.min.js を使用してユーザーの入力を検証しようとすると、サーバーからの応答はすべて問題ないことを示していますが、名前とパスワードの値は未定義です。メソッド doAjaxPost() が失敗したと思われます。 jquery.validator の後にフォームからデータを抽出します。ここに私の検証関数があります:

$(document).ready(function(){
        $("#loginform").validate({

            submitHandler: function(form) {
                doAjaxPost();
            },

            rules:{
                name:{
                    required: true,
                    minlength: 4,
                    maxlength: 16,
                },
                pswd:{
                    required: true,
                    minlength: 6,
                    maxlength: 16,
                }, 

           },
           messages:{
                name:{
                    required: "Login - is a mandatory field",
                    minlength: "Name should contain minimum {0} symbols",
                    maxlength: "Maximum symbols - {0}",
                },
                pswd:{
                    required: "Password - is a mandatory field",
                    minlength: "Password should contain minimum {0} symbols",
                    maxlength: "Password should contain maximum {0} symbols",
                },

           },

        });

    });

私の質問は、検証済みのフォームからデータを抽出して doAjaxPost 関数に渡す方法です。

私が思うに、これらの変数はフォームから何も取得しません

var name = $('#name').val();
var pswd = $('#pswd').val();

$('#loginform #name') のようなセレクターを使用する必要がありますか? 試してみましたが、うまくいきません。助けてください。

4

1 に答える 1

0

引用OP:

「私の質問は、検証済みのフォームからデータを抽出して doAjaxPost 関数に渡す方法です。」

jQuery.serialize()を使用ajaxして、プラグインのsubmitHandler.

Validate プラグインのドキュメントによるとsubmitHandlerコールバック関数は次のとおりです。

「フォームが有効な場合に実際の送信を処理するためのコールバック。唯一の引数としてフォームを取得します。デフォルトの送信を置き換えます。検証後にAjax を介してフォームを送信する適切な場所です。」

ajax関数が正しいと仮定して、次のコードを試してください。

$(document).ready(function () {

    $('#myform').validate({ // initialize the plugin
        // your rules & options,
        submitHandler: function (form) {
            //var name = $('#name').val(); // use serialize
            //var pswd = $('#pswd').val(); // use serialize
            $.ajax({
                type: "POST",
                url: "${pageContext. request. contextPath}/loginUser.htm",
                //data: "name=" + name + "&pswd=" + pswd,  // use serialize
                data: $(form).serialize(),
                success: function (response) {
                    // we have the response
                    if (response.status == "OK") {
                        $('#info').html("User has been added to the list successfully.<br>" +
                            "The User Details are as follows : <br> Name : " + response.result.name + " <br> Password: " + response.result.pswd);
                        $('#name').val('');
                        $('#pswd').val('');
                    } else {
                        $('#info').html("Sorry, there is something wrong with the data provided")
                    }
                },
                error: function (e) {
                    alert('Error: ' + e);
                }
            });
            return false; // blocks redirect after submission via ajax
        }
    });

});

デモ: http://jsfiddle.net/Cdvqw/

EDITajax : OPには、プラグイン内から呼び出された外部関数が既にありますsubmitHandler

于 2013-03-03T15:40:04.913 に答える