Question

我有一个HTML表单，正在使用JavaScript进行验证，如以下代码所示。所有JavasCript代码都在 app.js文件中。

App.js文件

$image_string = $request->get('image_string', false);
$filename = 'temp_image';

if ($image_string) {
    $resource = Image::make($image_string)->encode('png');
    Log::debug("Storing image");
    if ($resource !== false) {
        Storage::put("public/{$filename}.png", (string) $resource);
    } else {
       Log::error("Failed to get resource from string");
    }
}

在此文件中，我还有另一个jQuery Ajax代码使用Server验证表单。因此，我添加了以下Ajax代码来打击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;
}

用于HTML表单

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

现在，当使用JavaScript验证表单时，它也使用Ajax验证表单。

但是首先它应该使用JavaScript进行验证，然后再使用Ajax进行验证。

Answer 1

您需要在false回调内返回beforeSend，如官方jQuery文档所述：

beforeSend类型：函数（jqXHR jqXHR，PlainObject设置）

请求前回调函数，可用于修改jqXHR（在   jQuery 1.4.x，XMLHTTPRequest）对象在发送之前。用这个来   设置自定义标头等。jqXHR和设置对象作为   论点。这是一个Ajax事件。在beforeSend中返回false   功能将取消请求。从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();"。

Answer 2

从元素中删除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 );
        }
    });
});

如何使用JS验证表单，然后使用PHP和Ajax验证表单？

2 个答案: