为什么我的jQuery Validation需要2次点击才能调用?

时间:2012-05-15 18:55:20

标签: jquery asp.net html ajax jquery-ui

我有一个评论表单,其中包含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');
                }
            });
        }
    }); 
});

1 个答案:

答案 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();

});