Vanilla JS实现Form validation与Ajax提交 无刷新展示表单校验错误

问题1解答 #

可以在form标签添加onsubmit="return validateData(this, event)"触发请求，注意要加return和传入事件对象才能配合阻止默认提交行为。

问题2解答 #

原生JS阻止表单默认刷新有两种常用方案：

• 在提交事件回调中调用event.preventDefault()
• 提交事件绑定的函数最终返回false

问题3解答 #

可以直接用原生FormData对象批量获取表单内所有输入项的值，无需手动逐个读取DOM，直接作为xhr.send()的参数提交即可。 #

完整修正方案 #

1. HTML代码修改

注意修复原有代码的两个小问题：form标签多了多余的双引号、错误提示容器的id拼写错误

<button name="save" type="submit" form="product_form">Save</button>             
<div>
    <form id="product_form" method="POST" onsubmit="return validateData(this, event)">
        <label for="sku">SKU: </label>
        <input type="text" name="sku" id="sku" required><br>
        <label for="name">Name: </label>
        <input type="text" name="name" id="name" required><br>
        <label for="price">Price: </label>
        <input type="text" name="price" id="price" required><br>    
    </form>
</div>
<div id="validation"></div>

2. JS代码修改

function validateData(form, e) {
    // 阻止默认提交刷新行为
    e.preventDefault();
    // 清空上一次的错误提示
    document.getElementById("validation").innerHTML = '';

    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if(this.status == 200 && this.readyState == 4) {
            const resp = this.responseText.trim();
            // 后端返回success代表校验通过，前端控制跳转
            if(resp === 'success') {
                window.location.href = 'index.php';
            } else {
                // 校验不通过展示错误
                document.getElementById("validation").innerHTML = resp;
            }
        }
    }
    // 批量获取表单所有输入值
    const formData = new FormData(form);
    xhr.open("POST", "/partial/validateData.php");
    xhr.send(formData);

    return false;
}

3. PHP代码修改

原有PHP存在两个逻辑bug：跳转条件写反、header()跳转对Ajax请求无效且前面有输出会报错，修正后代码如下：

<?php
include __DIR__ . "/connectQuery.php";
$sku = $_POST["sku"] ?? '';
$name = $_POST["name"] ?? '';
$price = $_POST["price"] ?? '';

$error = '';
// SKU唯一性校验
$data = $query->getAllProducts();
$objectMap = new ObjectMap($data);
$productsArray = $objectMap->getAllProducts();
foreach($productsArray as $product) {
    if($product->getSku() == $sku) {
        $error .= "<p>Your SKU is not unique!</p>";
        break;
    }
}
// 价格格式校验
if (!is_numeric($price)) {
    $error .= "<p>Please enter valid data for price!</p>";
}

// 无错误返回标识，有错误返回错误内容
if(empty($error)) {
    echo 'success';
} else {
    echo $error;
}
?>

内容的提问来源于stack exchange，提问作者Raskoljnikovic