在验证完成之前停止提交？答案

【问题标题】：Stop submitting before validation is done?在验证完成之前停止提交？
【发布时间】：2014-11-23 22:55:32
【问题描述】：

大家好，我的一个插件有问题。我正在使用这个jquery form valdiation 来验证我的表单，但是如果我有一个 AJAX 调用来提交数据，那么验证将被忽略。我尝试设置一个全局变量并在 AJAX 调用中创建一个控制语句以停止提交它，但是当我这样做时，验证工作但它无法提交数据。

验证

var isValid = 0;
    $.validate({
        form : '#comment-form',
        onSuccess : function() {
          isValid = 1;
          return false; 
        },
        validateOnBlur : false,
        errorMessagePosition : 'top',
        scrollToTopOnError : false,
    });

AJAX 提交数据：

$(document).ready(function() {
  if (isValid == 1)
  {
  $("#submitComment").click(function (e) {
    e.preventDefault();
    var name = $("#nameTxt").val();
    var comment = $("#commentTxt").val(); //build a post data structure
    var article = $("#articleID").val();
    var isFill = $("#isFillTxt").val();

    jQuery.ajax({
      type: "POST", // Post / Get method
      url: "<?php echo site_url('articles/create_comment/'); ?>", //Where form data is sent on submission
      dataType:"text", // Data type, HTML, json etc.
      data: "body=" + comment + "&name=" + name + "&article_id=" + article + "&isFillCheck=" + isFill, //Form variables
      success:function(response){
        $("#responds").append(response);
        document.getElementById("commentTxt").value="";
        document.getElementById("nameTxt").value="";
      },
      error:function (xhr, ajaxOptions, thrownError){
        alert(thrownError);
      }
    });
  });
  }
});

【问题讨论】：

标签： javascript jquery ajax validation jquery-form-validator

【解决方案1】：

您的代码无法正常工作的原因是 isValid 的值为 0，并且您要求它在文档仍在加载时等于 1。

对于您的问题 - 您可以以一种仅在验证成功后触发 ajax 调用的方式链接事件。简而言之：

function sendForm()
{
  var name = $("#nameTxt").val();
  var comment = $("#commentTxt").val(); //build a post data structure
  var article = $("#articleID").val();
  var isFill = $("#isFillTxt").val();

  jQuery.ajax({
    type: "POST", // Post / Get method
    url: "<?php echo site_url('articles/create_comment/'); ?>", //Where form data is sent on submission
    dataType:"text", // Data type, HTML, json etc.
    data: "body=" + comment + "&name=" + name + "&article_id=" + article + "&isFillCheck=" + isFill, //Form variables
    success:function(response){
      $("#responds").append(response);
      document.getElementById("commentTxt").value="";
      document.getElementById("nameTxt").value="";
    },
    error:function (xhr, ajaxOptions, thrownError){
      alert(thrownError);
    }
  });
}

$.validate({
    form : '#comment-form',
    onSuccess : function() {
      sendForm();
      return false; 
    },
    validateOnBlur : false,
    errorMessagePosition : 'top',
    scrollToTopOnError : false,
});

只需确保整个过程发生在INSIDE文档准备功能中。

【讨论】：

【解决方案2】：

看起来验证脚本订阅了页面上“#comment-form”的提交事件。因此，在验证完成后运行处理程序的方式也是订阅提交事件。像这样：

    $("#comment-form").submit(function(){
        if(!isValid) {
            Do your Ajax here...
        }
    });

而且您不必在处理程序中调用“e.preventDefault()”。

【讨论】：

【解决方案3】：

我以前没有使用过这个表单验证器，所以在这里我可能会遇到困难。但是，我正在查看文档，但没有看到任何关于 AJAX 表单的支持。

您可以在验证器的 onSuccess 回调中运行您的 ajax 逻辑，而不是将您的点击事件附加到 #submitComment 元素，然后在最后返回 false。这样，您的表单将异步提交，您仍然会阻止正常的提交过程发生。

【讨论】：