尽管有效，但未触发submitHandler [英] submitHandler is not triggered although it is valid

问题描述

我 AJAXified评论系统，所以当单击Post Comment按钮时进行ajax调用而不是原始表单提交.多亏了我的另一个问题.如果绑定对象被ajax刷新，submit将不起作用，即使提交也可以正常工作按钮已刷新.

I AJAXified commenting system so when Post Comment button is clicked ajax call is made instead of the original form submission. Thanks to my other question .submit doesn't work if the bind object was refreshed by ajax this works now even if the submit button is refreshed.

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

Now I want to validate the form before submitting but I cannot make it work. The submitHandler option is not called even though the form is valid. The alert( "Valid: " + commentform.valid() ); is triggered and after the the original submit is performed not the ajax one.

提交表单的javascript如下

The javascript to submit the form looks like

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调用以提交表单吗?

Could someone suggest how to make the ajax call to submit form after the validation?

推荐答案

在这种情况下，您可以尝试以下操作:

In this case, you could try this:

    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.

You don't need the submitHandler and invalidHandler if you validate the form manually to send an ajax request.

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

This works but I recommend you to think about your current design to see if it's possible to avoid removing old forms with new forms and has to rebind the .validate() again everytime.

这篇关于尽管有效，但未触发submitHandler的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！