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') のようなセレクターを使用する必要がありますか? 試してみましたが、うまくいきません。助けてください。