如何为JS生成的文本输入框添加非空校验（入库前弹窗提示）

核心解决方案 #

在触发数据库插入操作前，遍历所有动态生成的type="text"输入框，检查内容是否为空。若存在空输入框，弹出提示并终止后续插入流程。

步骤1：编写全局校验函数 #

创建一个函数，用于检查所有目标输入框的非空状态：

function validateEmpInputs() {
    // 通过class选择器定位所有动态生成的文本输入框
    const textInputs = document.querySelectorAll('input[type="text"].input-w');
    
    for (const input of textInputs) {
        // 去除前后空格后判断是否为空
        if (input.value.trim() === '') {
            alert('请填写所有员工ID输入框，不能为空');
            // 自动聚焦到空输入框，提升用户体验
            input.focus();
            return false;
        }
    }
    return true;
}

步骤2：在插入数据库前调用校验 #

根据你的提交逻辑，选择对应的触发方式：

场景1：表单提交触发

给表单添加onsubmit事件，校验不通过则阻止提交：

<form id="empForm" onsubmit="return validateEmpInputs()">
    <!-- 表单内容 -->
    <button type="submit">提交到数据库</button>
</form>

场景2：自定义插入函数触发

如果是通过按钮点击调用自定义插入函数，在函数开头先执行校验：

function insertEmpData() {
    // 先执行校验，不通过则终止流程
    if (!validateEmpInputs()) {
        return;
    }
    
    // 这里执行数据库插入的逻辑（例如AJAX请求）
    // ...
}

可选优化：即时输入校验 #

如果想在用户离开输入框时就提示空值问题，可以修改add_more函数，给动态生成的输入框添加onblur事件：

function add_more()
{
   var tbl = '';
   tbl += '<tr id="'+i+'">';
   tbl += '<td><input  type="checkbox" value_of_i="'+i+'"  value="option1"     id="check_id'+i+'"    class="form-check-input checkbox_item checkk"></td>';
   // 添加onblur事件绑定单个输入框校验
   tbl += '<td><input  type="text"     value_of_i="'+i+'"  name="c_emp_id[]"   id="c_emp_id'+i+'"    class="input-w checkbox_item" oninput="get_group('+i+')" onblur="checkSingleInput(this)">';
   tbl += '<input      type="hidden"   value_of_i="'+i+'"  name="h_id[]"       id="h_id'+i+'"        class="inputData checkbox_item"/></td>';
   tbl += '</tr>';

    $("#t_body").append(tbl);

   i =i +1;
}

// 单个输入框的即时校验函数
function checkSingleInput(input) {
    if (input.value.trim() === '') {
        alert('该输入框不能为空');
        input.focus();
    }
}

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