我有一个评论表单,其中包含2个字段:作者和消息。当我单击提交按钮时,验证不会触发。如果我再次单击“提交”按钮,则验证将起作用。知道为什么吗?
//User Clicked Submit Button
$('#CommentsForm').live('submit', function (e) {
e.preventDefault(); //Prevent Browser from getting new url
//Validate the comments form
$('#CommentsForm').validate({
rules: {
Author: "required",
Message: "required"
},
messages: {
Author: "Author is required.",
Message: "Comment is required."
},
errorContainer: "#CommentsErrorBox",
errorLabelContainer: "#CommentsErrorBox ul",
wrapper: "li",
submitHandler: function() {
//Create JSON object
var jsonCommentData = {
ProductID: $('#HiddenProductID').val(),
Author: $('#Author').val(),
Message: $('#Message').val()
};
//Add the comment.
$.ajax({
url: '/Home/_CommentsAdd',
type: 'POST',
data: JSON.stringify(jsonCommentData),
dataType: 'html',
contentType: 'application/json',
//The request was a success. Repopulate the div with new result set.
success: function (data) {
$('#AjaxComments').html(data);
$('abbr.timeago').timeago(); //update the timestamp with timeago
//Change colors of message.
if ($('#CommentStatus').html() == "Your Comment Has Been Added!") {
$('#CommentStatus').css('color', 'GREEN');
}
},
error: function (data) {
alert('Fail');
}
});
}
});
});
答案 0 :(得分:3)
因为您第一次点击#CommentsForm
设置了jQuery验证:
$('#CommentsForm').validate({ ... });
因此,任何后续点击都会得到验证。
修正:
//setup validation
var form = $('#CommentsForm');
form.validate({ /* ... setup code .... */ });
form.live('submit', function (e) {
e.preventDefault(); //Prevent Browser from getting new url
$(this).validate();
});