Проверка формы перестала работать после добавления представления ajax на страницу

Question

У меня была обычная страница для отправки форм, которая использовала JavaScript проверки формы, который работал нормально.Увидеть ниже.Я изменил страницу для отправки через ajax, и теперь проверка формы пропускается.Как мне «объединить» два, чтобы все это заработало?Я предполагаю, что мне нужно как-то перенести валидацию в посте ajax, но я не могу понять это.Любая помощь будет оценена.

<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

Вы прикрепили свой вызов AJAX к событию click на кнопке отправки.Это вызывает до события отправки.Поскольку вы вызываете event.preventDefault() внутри обработчика нажатия кнопки отправки, событие submit никогда не запускается.

Вместо этого вы захотите запустить вызов AJAX в обработчике событий submit или переместите его в обработчик click.Как только форма пройдет проверку достоверности, вы можете отключить ваш фактический вызов AJAX.

Пример:

<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>