Question

嘿伙计我有一个插件有问题。我正在使用此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);
      }
    });
  });
  }
});

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

只需确保整个过程正在 INSIDE 文档就绪功能。

Answer 2

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

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

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

Answer 3

我之前没有使用过这种表格验证器，所以我可能会在这里走出困境。但是，我正在查看文档，但我没有看到任何支持AJAX表单的内容。

您可以在您的Validator的onSuccess回调中运行您的ajax逻辑，而不是将您的click事件附加到#submitComment元素，然后在结尾处返回false。这样，您的表单将以异步方式提交，并且您仍然无法阻止正常提交过程发生。

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

3 个答案: