将ajax提交添加到页面后，表单验证退出工作

Question

I had a regular form submission page the old fashion way that used form validation javascript that worked fine. See below. I changed the page to submit via ajax and now the form validation is skipped. How do I "combine" the two to make it all work? I assume I need to move the validation in the ajax post somehow, but I can't figure it out. Any help would be appreciated.

<form class="card"  name="myform" id="myform">
          <div class="card-body">
                <h3 class="card-title">Add New Blog Post</h3>
                <div id='response'></div>
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label class="form-label">Blog Title</label>
                    <input name="subject" type="text" required class="form-control" id="subject" required>
                        <div class="is-valid"></div>
                  </div>
                </div>
          </div>
</form>
<script>
     (function() {
 'use strict';
 window.addEventListener('load', function() {
// Fetch all the forms we want to apply custom Bootstrap validation styles 
//to
   var forms = document.getElementsByClassName('card');
   // Loop over them and prevent submission
   var validation = Array.prototype.filter.call(forms, function(form) {
     form.addEventListener('submit', function(event) {
       if (form.checkValidity() === false) {
         event.preventDefault();
         event.stopPropagation();
       }
        form.classList.add('was-validated');
      }, false);
    });
  }, false);
})();
 </script>

 <script>
    $(document).on("click","#submitbtn",function(e){  
       //Prevent Instant Click  
        e.preventDefault();
      $(document).ajaxSend(function(event, request, settings) {
         $('#loading-indicator').show();
           $("#submitbtn").prop('disabled', true);
           });

        $(document).ajaxComplete(function(event, request, settings) {
         $('#loading-indicator').hide();
         $("#output").fadeTo(4000, 500).slideUp(500, function(){
         $("#output").slideUp(500);
         });
           $("#myform")[0].reset();
           $("#submitbtn").prop('disabled', false);
          });

           var formData = new FormData($('#myform')[0]);    
         $.ajax({
             url: 'add_blog_do.php',
             enctype: 'multipart/form-data',
             type: 'POST',
             data: formData,
             success: function(response) {console.log(response);},
             contentType: false,
             processData: false,
             cache: false

                    });
             });

           </script>

Answer 1

You've attached your AJAX call to the click event on your submit button. This fires before the submit event. Since you're invoking event.preventDefault() inside the submit button click handler, the submit event is never running.

You'll want to instead fire your AJAX call in your submit event handler or move it into the click handler. Once the form passes the validity check, you can fire off your actual AJAX call.

An example:

<form class="card"  name="myform" id="myform">
          <div class="card-body">
                <h3 class="card-title">Add New Blog Post</h3>
                <div id='response'></div>
              <div class="row">
                <div class="col-md-4">
                  <div class="form-group">
                    <label class="form-label">Blog Title</label>
                    <input name="subject" type="text" required class="form-control" id="subject" required>
                        <div class="is-valid"></div>
                  </div>
                </div>
          </div>
</form>
<script>
    $(document).on("click","#submitbtn",function(e){  
       //Prevent Instant Click  
      e.preventDefault();

      // Fetch all the forms we want to apply custom Bootstrap validation styles to
      var forms = document.getElementsByClassName('card');
      // Loop over them and prevent submission
      var validation = Array.prototype.filter.call(forms, function(form) {
        form.addEventListener('submit', function(event) {

          // Check and see if the form is INVALID
          // if it is, it currently console logs.
          // You may want to do something else here but that's up to you
          if (form.checkValidity() === false) {
              console.log('Form validation failed')
          } else {

            // If the form DOESN'T fail, we'll enter this block and run our AJAX 
            // call as normal
            form.classList.add('was-validated');
            var formData = new FormData($('#myform')[0]);    
            $.ajax({
              url: 'add_blog_do.php',
              enctype: 'multipart/form-data',
              type: 'POST',
              data: formData,
              success: function(response) { console.log(response); },
              contentType: false,
              processData: false,
              cache: false
            });
          }
    });
  }, false);

    // AJAX Event Listeners for ajaxSend and ajaxComplete
    $(document).ajaxSend(function(event, request, settings) {
        $('#loading-indicator').show();
          $("#submitbtn").prop('disabled', true);
          });

      $(document).ajaxComplete(function(event, request, settings) {
        $('#loading-indicator').hide();
        $("#output").fadeTo(4000, 500).slideUp(500, function(){
        $("#output").slideUp(500);
        });
          $("#myform")[0].reset();
          $("#submitbtn").prop('disabled', false);
        });
      });
</script>