为所有带required类的表单元素应用校验脚本的问题求助

嘿，你的问题出在原代码只检查了第一个带required类的元素的值——因为$('.required').val()默认只会返回匹配集合中第一个元素的值，哪怕后面有其他可见的必填项为空，判断逻辑也只会基于第一个元素的状态，所以才会出现只对第一个生效的情况。

原代码的核心问题 #

这段判断逻辑是问题根源：

$(".required").is(":visible") && $('.required').val() == ''

它只验证了第一个可见required元素的内容，完全忽略了后续的同类型元素。

修改后的完整代码 #

下面是调整后的脚本，能正确遍历并检查所有可见的required元素：

$("form").submit(function(event) { // 注意传入event参数，避免未定义报错
    var modal = document.getElementById('myModal');
    
    // 筛选出所有「可见且值为空（含纯空格）」的required元素
    var emptyRequiredFields = $('.required:visible').filter(function() {
        return $(this).val().trim() === '';
    });

    // 只要存在未填写的必填项，就阻止提交并弹出模态框
    if (emptyRequiredFields.length > 0) {
        event.preventDefault();
        modal.style.display = "block";
    }

    // 点击模态框外部关闭
    window.onclick = function(e) {
        if (e.target == modal) {
            $('#myModal').hide();
        }
    }

    // 点击关闭按钮（x）关闭模态框
    // 改用jQuery事件绑定，兼容动态生成的元素
    $('.close').on('click', function() {
        $('#myModal').hide(); // 若使用jQuery UI的dialog，再换成dialog('close')
    });
});

关键修改点说明 #

• 用$('.required:visible').filter()遍历所有目标元素，精准筛选出未填写的可见必填项，通过length判断是否存在违规项。
• 加入.trim()处理用户只输入空格的情况，避免这种无效输入被误判为已填写。
• 给submit函数传入event参数，解决原代码中event可能未定义的潜在问题。
• 将span.onclick改为jQuery的.on('click')绑定，兼容性更强，尤其适用于关闭按钮是动态生成的场景。

这样修改后，表单提交时会检查所有可见的required元素，只要有一个未填写，就会阻止提交并弹出模态框啦～

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