未输入内容时如何触发Bootstrap表单校验事件 直接提交不调用自定义校验怎么办

你遇到的问题由两个原因导致：

• 产品名称输入框没有添加required属性，空值提交时原生校验会直接判定为有效，不会触发你自定义的校验规则
• 自定义的isValidString校验仅绑定了input事件，表单提交时没有主动触发执行

按以下步骤修改即可实现全场景校验：

1. 给产品名称输入框新增required属性，先保证必填校验生效
2. 将产品名称的校验逻辑抽成公共函数，在表单提交时主动调用
3. （可选）新增blur失焦事件监听，用户离开输入框时也触发校验，提升使用体验

HTML部分 #

<form
    action="/products/addProduct"
    enctype="multipart/form-data"
    class="needs-validation"
    novalidate
    method="post"
>
    <div class="col-md-12 position-relative">
        <label for="productName" class="form-label">产品名称</label>
        <!-- 新增required必填属性 -->
        <input
            type="text"
            name="productName"
            id="productName"
            class="form-control"
            required
        />
        <div class="invalid-feedback">
            请输入合法的产品名称（至少2个字符，不允许包含特殊字符）
        </div>
    </div>
    <div>
        <button type="submit" id="savebutton" name="Submit">
            创建
        </button>
    </div>
</form>

JS部分 #

let forms = document.querySelectorAll(".needs-validation");
const productNameField = document.getElementById("productName");

// 抽离公共的产品名称校验函数
function validateProductName() {
    const val = productNameField.value;
    if (!isValidString(val)) {
        productNameField.setCustomValidity("不合法");
    } else {
        productNameField.setCustomValidity("");
    }
}

// 输入时触发校验
productNameField.addEventListener("input", validateProductName);
// 可选：失焦时触发校验
productNameField.addEventListener("blur", validateProductName);

Array.prototype.slice.call(forms).forEach(function (form) {
    form.addEventListener(
        "submit",
        function (event) {
            // 提交表单前主动执行一次产品名称校验
            validateProductName();
            if (!form.checkValidity()) {
                console.log("校验不通过");
                event.preventDefault();
                event.stopPropagation();
            }
            console.log("执行校验");
            form.classList.add("was-validated");
        },
        false
    );
});

修改后无论你是输入过程中、离开输入框还是未输入任何内容直接点击提交按钮，都会执行isValidString自定义校验，Bootstrap原生的invalid-feedback错误提示会正常触发展示。

内容的提问来源于stack exchange，提问作者Leo Baby Jacob