Stop submitting before validation is done?

Question

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

Answer 1

the reason that you code is not working is because the value of isValid is 0 and you are asking it it equals 1 on when the document is still loading.

to your question - you may chain the events in a way that you will fire your ajax call only after validation is successful. in short:

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

just make sure that the entire process is happening INSIDE the document ready function.

Answer 2

It looks like validation script is subscribed to the submit event of the "#comment-form" on the page. So the way you can run your handler after validation is done is to subdcribe to the submit event as well. Like this:

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

And you do not have to call 'e.preventDefault()' in your handler.

Answer 3

I haven't used this Form Validator before, so I might be going out on a limb here. But, I'm looking through the documentation and I see nothing on support for AJAX forms.

Instead of attaching your click event to the #submitComment element, you could instead run your ajax logic inside of your Validator's onSuccess callback, then return false at the end. This way your form would submit asynchronously and you'd still prevent the normal submission process from taking place.