JavaScript表单验证功能正常但错误提示不显示问题求助

问题说明 #

我开发的预订表单验证逻辑能正常阻止错误提交，但输入错误数据时错误提示信息无法显示。尝试用以下代码添加错误提示，未生效：

$("input").add("span").addClass("error").value("*"); // 添加error类的span并设置值为*

表单HTML代码 #

<h1>Reservation Request</h1>
<form action="response.html" method="get" name="reservation_form" id="reservation_form">
    <fieldset>
        <legend>General Information</legend>
        <label for="arrival_date">Arrival date:</label>
        <input type="text" name="arrival_date" id="arrival_date" autofocus>
        <span>*</span><br>
        <label for="nights">Nights:</label>
        <input type="text" name="nights" id="nights">
        <span>*</span><br>
        <label>Adults:</label>
        <select name="adults" id="adults">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>                                                
        </select><br>
        <label>Children:</label>
        <select name="children" id="children">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>                                                
        </select><br>           
    </fieldset>
    <fieldset>
        <legend>Preferences</legend>
        <label>Room type:</label>
        <input type="radio" name="room" id="standard" class="left" checked>Standard&nbsp;&nbsp;&nbsp;               
        <input type="radio" name="room" id="business" class="left">Business&nbsp;&nbsp;&nbsp;
        <input type="radio" name="room" id="suite" class="left last">Suite<br>
        <label>Bed type:</label>
        <input type="radio" name="bed" id="king" class="left" checked>King&nbsp;&nbsp;&nbsp;
        <input type="radio" name="bed" id="double" class="left last">Double Double<br>
        <input type="checkbox" name="smoking" id="smoking">Smoking<br>
    </fieldset>     
    <fieldset>
        <legend>Contact Information</legend>
        <label for="name">Name:</label>
        <input type="text" name="name" id="name">
        <span>*</span><br>
        <label for="email">Email:</label>
        <input type="text" name="email" id="email">
        <span>*</span><br>
        <label for="phone">Phone:</label>
        <input type="text" name="phone" id="phone" placeholder="999-999-9999">
        <span>*</span><br>
    </fieldset>

    <input type="submit" id="submit" value="Submit Request"><br>

</form>

原jQuery验证代码 #

$(document).ready(function () {

    $("#arrival_date").focus;
    
    var $fields = $("#reservation_form").find('input');
    $("#reservation_form").submit(function (e) {
        var $emptyFields = $fields.filter(function () {
            // 若空格视为已填写则移除$.trim
            return $.trim(this.value) === "";
        });
        if ($emptyFields.length || !$.isNumeric($("#nights").val()) || !validateEmail($("#email").val())) {
            e.preventDefault();
        }


        function storeValues(form) { // 从输入框存储Cookie值的函数
            setCookie("arrival_date", form.arrival_date.value);
            setCookie("nights", form.nights.value);
            setCookie("name", form.name.value);
            setCookie("email", form.email.value);
            setCookie("phone", form.phone.value);
            return true;
        }
    });

    function validateEmail(email) {

        var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

        return re.test(email);
    }
});

问题分析与修复 #

原代码的核心问题 #

1. 选择器逻辑错误：$("input").add("span")会选中页面所有input和span，不是对应每个必填输入框的后续提示span；且jQuery中设置文本内容要用.text()，不能用原生JS的.value()。
2. 错误状态未重置：每次提交前没有清除之前的错误标记，会导致提示残留或重复。
3. 错误类型未区分处理：没有针对空值、非数字、邮箱格式错误分别定位对应的提示元素。
4. 语法错误：$("#arrival_date").focus缺少括号，应该是$("#arrival_date").focus()才会执行聚焦方法。

修复后的完整jQuery代码 #

$(document).ready(function () {
    // 修正聚焦方法的语法错误
    $("#arrival_date").focus();
    
    var $form = $("#reservation_form");
    $form.submit(function (e) {
        // 提交前先清除所有错误状态
        $form.find(".error").removeClass("error");
        $form.find("span").text("*");
        
        var hasError = false;
        
        // 1. 检查必填字段是否为空
        var $requiredInputs = $form.find('#arrival_date, #nights, #name, #email, #phone');
        var $emptyFields = $requiredInputs.filter(function () {
            return $.trim(this.value) === "";
        });
        if ($emptyFields.length > 0) {
            $emptyFields.each(function() {
                $(this).addClass("error");
                // 定位当前输入框后面的span，显示错误提示
                $(this).next("span").text("不能为空").addClass("error");
            });
            hasError = true;
        }
        
        // 2. 检查nights是否为有效数字
        var nightsVal = $("#nights").val();
        if ($.trim(nightsVal) !== "" && !$.isNumeric(nightsVal)) {
            $("#nights").addClass("error");
            $("#nights").next("span").text("必须是数字").addClass("error");
            hasError = true;
        }
        
        // 3. 检查邮箱格式是否正确
        var emailVal = $("#email").val();
        if ($.trim(emailVal) !== "" && !validateEmail(emailVal)) {
            $("#email").addClass("error");
            $("#email").next("span").text("邮箱格式错误").addClass("error");
            hasError = true;
        }
        
        // 有错误则阻止提交，否则存储Cookie
        if (hasError) {
            e.preventDefault();
        } else {
            storeValues(this);
        }
    });

    function validateEmail(email) {
        var re = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;
        return re.test(email);
    }

    function storeValues(form) {
        // 假设setCookie是你已定义的Cookie存储函数
        setCookie("arrival_date", form.arrival_date.value);
        setCookie("nights", form.nights.value);
        setCookie("name", form.name.value);
        setCookie("email", form.email.value);
        setCookie("phone", form.phone.value);
        return true;
    }
});

补充CSS样式（让错误提示更直观） #

/* 错误提示文本样式 */
span.error {
    color: #dc3545;
    margin-left: 5px;
}
/* 错误输入框边框样式 */
input.error {
    border: 1px solid #dc3545;
    background-color: #fff5f5;
}

关键修复点 #

• 每次提交前重置所有错误状态，避免旧提示残留
• 针对每个错误字段，精准定位其对应的后续span提示元素
• 用jQuery的.text()方法设置提示内容，替代错误的.value()调用
• 拆分不同错误类型的验证逻辑，给出针对性的提示文本
• 修正了聚焦方法的语法错误

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