Как я могу проверить форму с помощью JS и после этого с помощью PHP и Ajax?

Question

У меня есть HTML-форма, которую я проверяю, используя JavaScript, как показано ниже.Весь код JavasCript находится в файле app.js .

Файл App.js

function validateForm () {

    var amount          =   document.forms["salesform"]["amount"];               
    var buyer           =   document.forms["salesform"]["buyer"];    
    var buyerRegex      =   /^[a-zA-Z0-9_ ]*$/;     
    var receipt_id      =   document.forms["salesform"]["receipt_id"];  
    var receiptIdRegex  =   /^[a-zA-Z_ ]*$/;        
    let items           = document.querySelectorAll(".items")
    var itemsRegex      =   /^[a-zA-Z_ ]*$/;
    var buyer_email     =   document.forms["salesform"]["buyer_email"];  
    var note            =   document.forms["salesform"]["note"];  
    var city            =   document.forms["salesform"]["city"];  
    var cityRegex       =   /^[a-zA-Z_ ]*$/;
    var phone           =   document.forms["salesform"]["phone"];
    var phoneRegex      =   /^[0-9]*$/;
    var entry_by        =   document.forms["salesform"]["entry_by"];
    var entryByRegex    =   /^[0-9]*$/;

    function validateEmail(email) {
        var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return re.test(String(email).toLowerCase());
    }

    if (amount.value == "") { 
        alert("Please enter the amount."); 
        amount.focus(); 
        return false; 
    } else if (isNaN(amount.value)) {
        alert("Amount must be only numeric value."); 
        amount.focus(); 
        return false; 
    } else if (amount.length > 10 ) {
        alert("Amount must be less than 10 characters long."); 
        amount.focus(); 
        return false; 
    }

    // more validation.....

    return true;
}

В этом файле у меня есть другой код jQuery Ajax для проверки формы с использованием сервера.Так что я добавил следующий Ajax-код, удаляющий этот код проверки JS:

$("#salesForm").submit(function(e) {
    e.preventDefault();
    $.ajax({
        url : '../process/add-data.php',
        type: 'POST',
        dataType: "html",
        data : $(this).serialize(),     
        beforeSend : function () {
            $(".formResult").html("Please wait...");
        }, 
        success : function ( data ) {
            $(".formResult").html( data );
        }
    });
}); 

для формы HTML

<form name="salesform" id="salesForm" onsubmit="return validateForm();" method="POST">

Теперь, когда форма проверяется с использованием JavaScriptзатем он также проверяет форму, используя Ajax.

Но сначала его нужно проверить с помощью JavaScript, а затем Ajax.

Answer 1

Удалите onSubmit из элемента и измените вашу функцию Ajax, чтобы она возвращала неверную форму ПЕРЕД выполнением вызова.

$("#salesForm").submit(function(e) {
    e.preventDefault();

    if(!validateForm()) return;

    $.ajax({
        url : '../process/add-data.php',
        type: 'POST',
        dataType: "html",
        data : $(this).serialize(),     
        beforeSend : function () {
            $(".formResult").html("Please wait...");
        }, 
        success : function ( data ) {
            $(".formResult").html( data );
        }
    });
}); 

Answer 2

Вам необходимо вернуть false внутри beforeSend обратного вызова, как описано в официальной документации jQuery:

beforeSend Тип: Функция (настройки jqXHR jqXHR, PlainObject)

Функция обратного вызова перед запросом, которую можно использовать для изменения объекта jqXHR (в jQuery 1.4.x, XMLHTTPRequest) перед его отправкой.Используйте это для установки пользовательских заголовков и т. Д. Объекты jqXHR и settings передаются в качестве аргументов.Это Ajax Event.Возврат false в функции beforeSend отменит запрос.Начиная с jQuery 1.5, опция beforeSend будет вызываться независимо от типа запроса.

Итак, вам нужно сделать что-то вроде этого:

beforeSend : function () {
    $(".formResult").html("Please wait...");
    if(!validateForm()) {
        // Here you remove your "Please wait..." message
        return false;
    }
    // Or simply return the value from validateForm():
    // return validateForm();
},

И, конечно,удалите onsubmit="return validateForm();" из вашего тега формы.