0

Hey guys I have a problem with one plugin. I am using this jquery form valdiation to validate my form, but if I have an AJAX call to submit the data then the validation is ignored. I tried setting a global variable and making a control statement at the AJAX call to stop of submitting it but when I did that the validation worked but it can't submit the data.

Validation 

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

AJAX Submit Data:

$(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);
      }
    });
  });
  }
});
4

3 回答 3

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

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

于 2014-11-23T23:06:48.980 回答
0

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

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

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

于 2014-11-23T23:17:37.140 回答
0

我以前没有使用过这个表单验证器，所以我可能会在这里冒险。但是，我正在查看文档，但我没有看到对 AJAX 表单的支持。

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

于 2014-11-23T23:20:51.830 回答