数组命名表单字段后，如何用jQuery实现无重复必填项错误提示？

核心思路 #

1. 阻止表单默认提交行为，避免页面刷新导致错误提示失效
2. 针对每个必填字段，先清理已有错误提示，再根据内容是否为空决定是否添加新提示，从根源避免重复添加
3. 无需强制依赖id属性，通过当前字段的上下文即可精准定位其后方的错误提示元素，灵活度更高

完整代码实现 #

$('.form-submit').click(function(e) {
    // 阻止表单默认提交，避免页面刷新
    e.preventDefault();
    const reqTip = '<span class="required-text">This field is required</span>';
    
    $('.required-field').each(function() {
        // 先移除当前字段后方已有的错误提示，杜绝重复
        $(this).next('.required-text').remove();
        
        // 用trim()过滤纯空格的无效输入
        if ($(this).val().trim() === '') {
            // 字段为空时添加错误提示
            $(this).after(reqTip);
        }
        // 字段不为空的情况，已通过remove清理旧提示，无需额外操作
    });
});

关键细节说明 #

• 避免重复添加：每次处理前先调用$(this).next('.required-text').remove()，确保当前字段后方不会残留旧的错误提示，再判断是否添加新提示，彻底解决重复问题。
• trim()的作用：过滤用户仅输入空格的无效内容，让必填判断更准确。
• 无需依赖id：通过$(this)获取当前循环的字段元素，再用.next('.required-text')精准定位其后方的错误提示，即使后续新增字段也无需修改代码，扩展性更强。

可选方案：强制通过id关联错误提示 #

如果确实需要基于id来定位错误提示，可以给错误提示设置与字段id关联的唯一标识（比如字段id加-error后缀），实现精准匹配：

$('.form-submit').click(function(e) {
    e.preventDefault();
    
    $('.required-field').each(function() {
        const fieldId = $(this).attr('id');
        const errorId = `${fieldId}-error`;
        
        // 移除对应id的错误提示
        $(`#${errorId}`).remove();
        
        if ($(this).val().trim() === '') {
            // 添加带关联id的错误提示
            $(this).after(`<span id="${errorId}" class="required-text">This field is required</span>`);
        }
    });
});

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