Combining two javascript functions to validating a form and submit it via ajax

Question

I am trying to add validation to a form that is submitted by ajax, and have it partially working.

Here's the code that submits the form:

<script type="text/javascript">
$(document).ready(function(){$(".sendName").click(function(){
var Email=$("#Email").val();
var Name=$("#Name").val();
var ErrorType=$("input:radio[name=ErrorType]:checked").val();
var Univer=$("#Univer").val();
var ErrorMessage=$("#ErrorMessage").val();
$.post("report.php",{Email:Email,Name:Name,ErrorType:ErrorType,Univer:Univer,ErrorMessage:ErrorMessage},function(data){$("#loadName").html(data).effect('bounce', { times: 5, distance: 30 }, 300);
  });
 });
});
</script>

That code works perfectly.

I am also using the livevalidation plugin, and have it mostly working as well. The only problem I am having is calling the validation code from within the function that submits the form.

Normally the validation code is called like this:

 <form onsubmit="return validate(this)">

However, because the form is being submitted by ajax the current form tag is:

 <form onSubmit="return false;">

So what I need to be able to do is call the validate function from within the function that submits the form via ajax.

How would I do something like this? Both scripts are working fine on their own, it's just this one last thing I need to figure out.

So I need to call the validate function when the ajax function is called, and if the form validates the script can complete the ajax request, and if the form does not validate it should not be submitted.

I did some searching and found a couple similar questions, but no solutions. Any help would be appreciated.

Answer 1

The easier way to do this is to only cancel the submit if there is a validation error, otherwise let the submit happen normally.

<form id="new-item" method="post" action="/i">

Then in your javascript:

$('#new-item').submit( function () {

  var valid = true;

  // do you validation logic
  valid = validate(this);

  // returning true will let the normal submit action happen
  // returning false will prevent the default action (i.e. the form will not be sumitted)
  return valid;

});

If you don't want to use the standard submit functionality (though that is a best practice since it works when javascript is disabled) you would do a similar thing but just always return false.

$('#new-item').submit( function () {

  var valid = true;

  // do you validation logic
  valid = validate(this);

  if (valid ) {
    // send your ajax post request here
  }


  // returning true will let the normal submit action happen
  // returning false will prevent the default action (i.e. the form will not be sumitted)
  return false;

});

Answer 2

Agreeing with bill

Assumning this form

<form id="formId" ...
  .
  .
  <input type="submit" />
</form>

Using your code:

<script type="text/javascript">
$(document).ready(function(){
  $("#formId").submit(function(){
    if (!validate(this)) return false;
    var Email=$("#Email").val();
    var Name=$("#Name").val();
    var ErrorType=$("input:radio[name=ErrorType]:checked").val();
    var Univer=$("#Univer").val();
    var ErrorMessage=$("#ErrorMessage").val();
    $.post("report.php",
      {Email:Email,Name:Name,ErrorType:ErrorType,Univer:Univer,ErrorMessage:ErrorMessage},function(data){$("#loadName").html(data).effect('bounce', { times: 5, distance: 30 }, 300);
    });
    return false; // cancel normal submission
   });
});
</script>