jquery验证需要点击提交两次才能提交表格

我有一个模式表单，用户必须填写表单（否则验证会显示必填字段的错误信息），然后点击提交输入类型，它什么都不做，然后再次点击它，然后它会通过ajax发布，并返回“谢谢”消息。jquery验证需要点击提交两次才能提交表格

我看了看周围的Stackoverflow并应用了我遇到的问题，但是我仍然无法使其工作。我确实删除了event.preventDefault（）;从它，以及$（“＃review-form”）。submit（function（event）{和表单提交后应该像点击提交后一样提交，但是它不会发布到数据库中

下面是jQuery的为＃审查形式

$("#review-form").validate({ 
    submitHandler: function() { 
     $("#review-form").submit(function (event) { 
      var rating = $(this).find('input[name=rating]'); 
      // var rating = $(this).find('input[name=rating]').val(); 
      var review = $(this).find('textarea[name=review]'); 
      var form_settings = $(this).find('input[name=form_settings]'); 
      var xid = $(this).find('input[name=XID]'); 
      var entry_id = $(this).find('input[name=entry_id]'); 
      var entry_type = $(this).find('input[name=entry_type]'); 
      var site_id = $(this).find('input[name=site_id]'); 
      var first_name = $(this).find('input[name=first_name]'); 
      var middle_initial = $(this).find('input[name=middle_initial]'); 

      $.ajax({ 
       url: $("#review-form").attr("action"), //your server side script 
       data: $(this).serialize(), 
       type: 'POST', 
       success: function (data) { 
        //$('#response').append('<li>' + data + '</li>'); 
        $('#review-form').hide(); 
        $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>"); 
       }, 
       error: function (jxhr, msg, err) { 
        $('#response').append('<li style="color:red">' + msg + '</li>'); 
       } 
      }); 
      event.preventDefault(); 
     }); 
    } 
});

更新：我删除了$（ “＃检讨形式”）提交（函数（事件）{}）;我，改变了$（本） .find ...，并通过指定表单的ID＃form-review，然后通过数据参数来检索。我注释掉了所有的单个变量，并将$（this）.serialize（）传递给数据参数，不起作用

下面的代码在Chrome和Firefox的工作，但在Firefox，它关闭模式并重定向到站点的主页，它应该保持模式与您味精感谢开放的，像它在Chrome中的作用：

$("#review-form").validate({ 
    submitHandler: function() { 

     $.ajax({ 
      url: $("#review-form").attr("action"), //your server side script 
      data: $("#review-form").serialize(),     
      type: 'POST', 
      success: function (data) { 
       $('#review-form').hide(); 
       $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>"); 
      }, 
      error: function (jxhr, msg, err) { 
       $('#response').append('<li style="color:red">' + msg + '</li>'); 
      } 
     }); 

     event.preventDefault(); 
    } 
});

最终工作产品：

$("#review-form").validate({ 
    submitHandler: function() { 

     $.ajax({ 
      url: $("#review-form").attr("action"), 
      data: $("#review-form").serialize(), 
      type: 'POST', 
      success: function (data) { 
       $('#review-form').hide(); 
       $('#review-form-response').html("<h3 style='text-align:center;'>Thank you, your review was submitted!</h3>"); 
      }, 
      error: function (jxhr, msg, err) { 
       $('#response').append('<li style="color:red">' + msg + '</li>'); 
      } 
     }); 
    } 
});

来源

2013-12-10 Brad

你一定要删除'$（“＃检讨形式”）。submit'调用时，被绑定在第一次点击，这就是为什么你所得到的提交处理程序死点击。你是否从你的'$ .ajax'调用中收到错误？ – Mathletics

@Mathletics谢谢，这有帮助。 – Brad

你要绑定一个新的submit事件处理程序，submitHandler回调的插件内。这个处理程序不会立即开启，因为提交事件已经在进行中。

你不需要它。该submitHandler回调已经preventDefault内部内插件代码

删除此

$("#review-form").submit(function(event) { })

，并保持内submitHandler

直接包含的所有代码，因为你正在使用serialize()的数据... 。你不需要你创建的所有单个字段变量

来源

2013-12-10 14:24:23 charlietfl

重要的常识知识：不一定适用于此，但serialize（）不包括文件输入。 –

我试着传递这样的序列化数据：data：$（this）.serialize（），并且没有用，更新了我的代码解释。 – Brad

添加'form'作为argmuent提交处理程序'submitHandler：function（form）{'...然后可以使用'$（form）.serailize（）' – charlietfl

我有同样的问题并解决它通过添加以下到我的validate：

$("#myform").validate({ 
    onfocusout: false 
});

onfocusout会从你的表单字段清除病灶，并提交按钮会在第一次点击的工作。

多见于https://jqueryvalidation.org/validate/

来源

2017-05-04 11:54:14

jquery验证需要点击提交两次才能提交表格

回答

相关问题