submitHandler 虽然有效但未触发

Question

我AJAXified commenting system 所以当点击Post Comment 按钮时，会进行ajax 调用而不是原始表单提交。感谢我的另一个问题.submit doesn't work if the bind object was refreshed by 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 调用以提交表单吗？

Answer 1

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

    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()。