在验证完成之前停止提交

Question

嘿伙计们，我有一个插件的问题。我正在使用这个 jquery 表单价值来验证我的表单，但是如果我有一个 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);
      }
    });
  });
  }
});

Answer 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,
});

只需确保整个过程在文档就绪功能内进行即可。

Answer 2

看起来验证脚本订阅了页面上"#comment 表单"的提交事件。因此，在验证完成后运行处理程序的方法也是订阅提交事件。喜欢这个：

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

而且您不必在处理程序中调用"e.preventDefault（）"。

Answer 3

我以前没有使用过这个表单验证器，所以我可能会在这里四处奔波。但是，我正在浏览文档，没有看到任何关于 AJAX 表单支持的内容。

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