Где мне добавить ajax к Bootstrap 4 форме проверки javascript?

Question

Я действительно ужасен с javascript, но учусь. Вот проверка формы Bootstrap 4 js:

( function() {
    "use strict";

    window.addEventListener( "load", function() {
        var forms = document.getElementsByClassName( "needs-validation" );

        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 );
})();

Где мне добавить jQuery Ajax материал? Добавить его в Bootstrap js или создать совершенно новую и отдельную функцию?

$.ajax({
    url      : "contact.php",
    type     : "POST",
    dataType : "json",
    data     : $( this ).serialize(),
    success  : function( data )
    {
        if ( data.type == "error" ) {
            output = '<div class="error">'+data.text+"</div>";
        }
        else {
            $( form )[0].reset();
            output = '<div class="success">'+data.text+"</div>";
        }
        $( "#contact-results" ).html( output );
    }
});

Answer 1

Вот простой учебник о том, как добавить javascript в ваш код.

Теперь, когда вы знаете, куда можно добавить свой javascript: ваш ajax вызов будет вызван после проверки вашей формы:

(function () {
    "use strict";
    window.addEventListener("load", function () {
        var forms = document.getElementsByClassName("needs-validation");

        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");

                // Here you are going to add your ajax call after checking if the form validation is valid
                if (form.checkValidity() === true) {
                    event.preventDefault();
                    // To reset the appearance of the form (for instance, in the case of dynamic form submissions using AJAX), remove the .was-validated class from the <form> again after submission. (boostrap doc)
                    form.classList.remove("was-validated");
                    $.ajax({
                        url: "contact.php",
                        type: "POST",
                        dataType: "json",
                        data: $(this).serialize(),
                        success: function (data) {
                            if (data.type == "error") {
                                output = '<div class="error">' + data.text + "</div>";
                            }
                            else {
                                $(form)[0].reset();
                                output = '<div class="success">' + data.text + "</div>";
                            }
                            $("#contact-results").html(output);
                        }
                    });
                }

            },
                false);
        });
    },
    false);
})();

Answer 2

Я нашел какое-то странное использование для некоторых методов, но вот как я думаю, что это должно быть так.

Я не знаю, почему все добавляют false в качестве третьего аргумента для addEventListener Метод в качестве значения для useCapture. но значением по умолчанию является false 3laya el 7aram men dini. взглянуть https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

function onSuccess(data) {
  const error = data.type === 'error';
  const className = error ? 'error' : 'success';
  const output = `<div class="${className}">${data.text}</div>`;
  $('#contact-results').html(output);
  if (!error) {
    $(form)[0].reset();
  }
}

function onSubmit(event) {
  const form = event.target
  if (form.checkValidity() === false) {
    event.preventDefault();
    event.stopPropagation();
  }
  form.classList.add('was-validated');
  const options = {
    type: 'POST',
    dataType: 'json',
    url: 'contact.php',
    success: onSuccess,
    data: $(form).serialize(),
  }
  $.ajax(options);
}

function onLoad() {
  const forms = document.querySelectAll('.needs-validation');
  forms.forEach(function(form) {
    form.addEventListener('submit', onSubmit);
  });
}

(function() {
  'use strict';
  window.addEventListener('load', onLoad);
})();

Кроме того, я бы предложил всегда сохранять блоки максимально простыми. потому что их так легко вырастить.