sklrboy sklrboy - 6 months ago 9
PHP Question

jQuery validation works, but still able to submit form if entries are incorrect

I'm using jquery validation plugin at my contact form, which returns if something is wrong in the form, but even if the entries are incorrect (for ex. name not longer than 1 character) I can submit the form and it sends the email with the incorrect data. How could I prevent the button from being active before the entries would be all correct?

$(document).ready(function() {
var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>';

$('#myform').validate();

$('.btn').click(function(){
var data = $("#myform").serialize();
$('.form').html('').append(newHTML);
$.post( "includes/sendmail.php", {data});
});
});



Answer

Like this:

$(function() {
  var newHTML = '<div class="col-sm-12 text-center" style="color:white; background-color:#6f8595; padding-bottom:15px; border-radius:5px;"><h3>Thank you for your message!<br />We will get back to you as soon as possible!</h3></div>';
  $('#myform').validate();
  $('#myform').on("submit",function(e){
    e.preventDefault();
    if ($(this).valid()) {
      var data = $(this).serialize();
      $(this).html(newHTML);
      $.post( "includes/sendmail.php", {data});
    }
  }); 
});

Alternatively according to documentation you can execute the AJAX call in the validation submit handler - something like this:

 $('#myform').validate({    
   submitHandler: function(form) {
     var data = $(form).serialize();
     $(this).html(newHTML);
     $.post( "includes/sendmail.php", {data});
     return false;
   }
 }); 
Comments