0

我对评论系统进行了 AJAX 化，因此当Post Comment单击按钮时，会进行 ajax 调用而不是原始表单提交。感谢我的另一个问题.submit 如果绑定对象由 ajax 刷新，则即使刷新提交按钮，它现在也可以工作。

现在我想在提交之前验证表单，但我无法让它工作。即使表单有效，也不会调用 submitHandler 选项。被alert( "Valid: " + commentform.valid() );触发并且在执行原始提交之后不是ajax。

提交表单的 javascript 看起来像

jQuery(document).ready(function($){
        $('#content_container').on("submit","#commentform",function(){
                var commentform=$('#commentform'); // find the comment form

                console.log('Post Comment button was clicked');     


var validator = $("#commentform").validate({ 
    onsubmit: false,
    rules: { 
        author: "required", 
        email: { required: true, email: true }, 
        url: { url: true    }, 
        comment: "required" 
    }, 
    messages: { 
        author: "Please enter your name",   
        email: { required: "Please enter an email address", 
        email: "Please enter a valid email address" }, 
        url: "Please enter a valid URL e.g. http://www.mysite.com", 
        comment: "Please include your comment" 
    } ,

    submitHandler: function(form) {  // The jQuery.validate plugin will invoke the submit handler if the validation has passed.
            alert( "Valid (submitHandler): " + form.valid() );
            console.log("before exit");
            return;
            console.log("after exit");
        },
    invalidHandler: function(event, validator) {
            alert( "Valid (invalidHandler): " + form.valid() );
            console.log("before exit");
            return;
            console.log("after exit");
        }
});
alert( "Valid: " + commentform.valid() );
return;

        $.ajax({
            type: 'post',
            url: formurl,
            data: formdata,

有人可以建议如何在验证后进行 ajax 调用以提交表单吗？

4

1 回答 1

0

在这种情况下，你可以试试这个：

    jQuery(document).ready(function($){
         $('#content_container').on("submit","#commentform",function(){
             var commentform=$('#commentform'); // find the comment form

             console.log('Post Comment button was clicked');     


     var validator = $("#commentform").validate({ 
        onsubmit: false,
        rules: { 
            author: "required", 
            email: { required: true, email: true }, 
            url: { url: true    }, 
            comment: "required" 
        }, 
        messages: { 
            author: "Please enter your name",   
            email: { required: "Please enter an email address", 
            email: "Please enter a valid email address" }, 
            url: "Please enter a valid URL e.g. http://www.mysite.com", 
            comment: "Please include your comment" 
        } 
    });
    if (commentform.valid()){
        //Your ajax to post the form
        $.ajax({
                type: 'post',
                url: formurl,
                data: formdata,
    }
    else{
       //form is not valid.
    }
    return false;// stop the form submission and refresh the page.
  });

});

如果您手动验证表单以发送 ajax 请求submitHandler，则不需要。invalidHandler

这可行，但我建议您考虑一下您当前的设计，看看是否有可能避免用新表单删除旧表单，并且.validate()每次都必须重新绑定。

于 2013-10-15T05:30:26.440 回答