Блог

Я, я пытаюсь проверить (проверить) данные формы с помощью AJAX. Сначала я создаю функцию обратного вызова с помощью AJAX-запроса (в моем примере это время поля) Когда я нашел ту же запись в базе данных, мой ответ сервера NodeJS со значением false, это означает, что у нас есть запись, и нам не нужно добавлять вторую запись за это время).

Моя проблема в том, что форма все еще отправляется, независимо от ответа сервера.

вот мой код (интерфейс)

 function funABC(mdata,callback){
    console.log(mdata);
    $.ajax({
      url:'/dashboard/materials/checkshowrange',
      method: 'GET',      
      dataType: "json",
      contentType: "application/json",
      data:mdata,
      success: callback ,
     // error:callback,

    });
  }  


 $('.addForm').on('submit', function (event) {
    let form = $('.addForm');
    if (form[0].checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
     // return false;
    }

event.preventDefault();
checkdata = {
        time_show : document.querySelector('.addForm').elements.time_show.value
      }
    functABC(checkdata,function(result) {     
      console.log(result); 
      if (result == 'true') {
        alert(`For time: ${checkdata. time_show} there is already an event, choose a different time`);        
        return false;
      } 
    })


form.addClass('was-validated');


some operations with form data, then send with ajax

$.ajax({
        type: "POST",
        url: "/dashboard/materials/add",
        dataType: "json",
        contentType: "application/json",
        success: function (data) {
          setTimeout(location.href = '/dashboard/materials', 10000);
        },
        data: JSON.stringify(formdata)
      });


});


  

Как и где вы вызвали этот post-запрос? Возможно, вам потребуется переместить post-запрос в обратный вызов

 function funABC(mdata, callback) {
    console.log(mdata);
    $.ajax({
        url: '/dashboard/materials/checkshowrange',
        method: 'GET',
        dataType: "json",
        contentType: "application/json",
        data: mdata,
        success: callback,
        // error:callback,

    });
}

$('.addForm').on('submit', function(event) {
    let form = $('.addForm');
    if (form[0].checkValidity() === false) {
        event.preventDefault();
        event.stopPropagation();
        // return false;
    }

    event.preventDefault();
    checkdata = {
        time_show: document.querySelector('.addForm').elements.time_show.value
    }
    functABC(checkdata, function(result) {
        console.log(result);
        if (result == 'true') {
            alert(`For time: ${checkdata. time_show} there is already an event, choose a different time`);
            return false;
        } else {
            $.ajax({
                type: "POST",
                url: "/dashboard/materials/add",
                dataType: "json",
                contentType: "application/json",
                success: function(data) {
                    setTimeout(location.href = '/dashboard/materials', 10000);
                },
                data: JSON.stringify(formdata)
            });
        }
    })


    form.addClass('was-validated');

});
  

Или вы можете асинхронно использовать false для запроса проверки

 $.ajax({
    url: '/dashboard/materials/checkshowrange',
    method: 'GET',
    dataType: "json",
    contentType: "application/json",
    data: mdata,
    success: callback,
    async: false,
    // error:callback,

});