AJAX Validation, ajax not execute but it send get to index.php

Question

So I was looking how to validate before AJAX executes. My AJAX was works fine before I add if ($("#ModalsForm").validate()){}. After I add that validate, it will validate and return true and send Get to my index.php.

index.php?bookingid=10040917035610&roomid=10&...

My HTML

<form id="ModalsForm" method="post" data-parsley-excluded="[disabled=disabled]">
     <div id="myModal" class="modal fade" 
     tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none;">
         <div class="modal-dialog modal-lg">
            <div class="modal-content" id="modalcontent">
            <!-- AJAX onclick content modal -->
            </div><!-- /.modal-content -->
         </div><!-- /.modal-dialog -->
     </div>
 </form>

My AJAX

function ConfirmSubmit() {
  var x = confirm("Are you sure you want to save or update?");
  if (x) {
    if ($("#ModalsForm").validate()) {
      e.preventDefault();
      $.ajax({
        type: "POST",
        url: "modules/BookingCalendar/runsave.php",
        data: $("#ModalsForm").serialize(),
        contentType: "application/x-www-form-urlencoded",
        success: function(result) {
          alert(result);
          //$("#information").html(result);
          $('#myModal').modal('toggle');
        }
      });
      return false;
    } else {
      return false;
    }
  } else {
    return false;
  }
}

Did I miss something when I validate my form?

<script>
$('#ModalsForm').validate({
  submitHandler: function() {
    if (confirm("Are you sure you want to save or update?")) {
      $.ajax({
        type: "POST",
        url: "modules/BookingCalendar/runsave.php",
        data: $("#ModalsForm").serialize(),
        contentType: "application/x-www-form-urlencoded",
        success: function (result) {
          alert(result);
          $('#myModal').modal('toggle'); 
        }
      });
      return false;
    }
  }
});
</script>

Newest From Rory McCrossan, it's caught error in console

e.preventDefault(): e is not defined anywhere. Did you check the console for errors? — Phix
– Phix, Commented Sep 5, 2017 at 8:21

Rory McCrossan · Accepted Answer · 2017-09-05 08:32:15Z

3

If you're using jQuery validate and want to submit the form via AJAX you should invert the logic, so that you use the submitHandler option of the plugin to implement your own logic when the form is valid, like this:

$('#ModalsForm').validate({
  rules: { /* your rules. .*/ },
  messages: { /* your messages... */ },
  submitHandler: function() {
    if (confirm("Are you sure you want to save or update?")) {
      $.ajax({
        type: "POST",
        url: "modules/BookingCalendar/runsave.php",
        data: $("#ModalsForm").serialize(),
        contentType: "application/x-www-form-urlencoded",
        success: function (result) {
          $('#myModal').modal('toggle'); 
        }
      });
    }
    return false;
  }
});

You can then remove the ConfirmSubmit() function, and just submit the form element normally.

edited Sep 5, 2017 at 8:32

answered Sep 5, 2017 at 7:46

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Hasyidan Paramananda Over a year ago

so required inside input is useless when i use ajax ?

Rory McCrossan Over a year ago

No, you can still use that method too, this was just for an example

Hasyidan Paramananda Over a year ago

hm.. validation is work, but my ajax not even working after i try to use submitHandler: function() {} and it submit just like there is no script i think

Rory McCrossan Over a year ago

Apologies - I missed the return false;. I updated the answer for you

Hasyidan Paramananda Over a year ago

wait i will update my code, because it's skip the script

|

Collectives™ on Stack Overflow

AJAX Validation, ajax not execute but it send get to index.php

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related