基于jQuery+HTML的表单优化：保留已填数据并固定页面位置

当前基于HTML和jQuery的联系表单存在以下问题：验证失败时页面会回到顶部，且用户已填写的信息被清空。以下是修复后的完整代码，实现验证出错时停留在表单位置、保留正确输入并仅标记错误字段的需求。

修正后的HTML代码 #

<footer style="background-color: black;color: white">
    <form id="contactForm">
        <h3>Nous-Joindre</h3>

        <div class="formContainer">
            <label for="prenom">Prénom</label>
            <input type="text" id="prenom" name="prenom" placeholder="Votre Prénom">

            <label for="nom">Nom de Famille</label>
            <input type="text" id="nom" name="nom" placeholder="Votre nom de Famille">

            <label for="email">Courriel :</label>
            <input type="email" name="email" id="email" placeholder="Courriel@example.com"><br>

            <label for="sujet">Sujet</label>
            <input type="text" name="sujet" id="sujet" placeholder="Sujet">

            <label for="message">Message</label>
            <textarea id="message" name="message" placeholder="Écrire votre Message ici.."
                style="height:200px"></textarea>

            <input id="submit" type="submit" value="Envoyer">
        </div>
    </form>
</footer>

HTML修正点 #

• 给表单添加id="contactForm"方便绑定事件
• 移除主题字段多余的</textarea>标签
• 邮箱输入框改为type="email"，符合语义化规范
• 修正消息字段的label关联（原for="subject"改为for="message"）

修正后的CSS代码 #

.formContainer {
    border-radius: 5px;
    background-color: rgba(69, 101, 66, 0.64);
    padding: 20px;
}
.error-border {
    border: 2px solid red !important;
}
.success-border {
    border: 2px solid green !important;
}

CSS修正点 #

• 修复background-color的无效多值写法，改为rgba透明色
• 添加统一的错误/成功边框类，避免重复编写内联样式

修复后的jQuery代码 #

$('#contactForm').submit(function (event) {
    // 阻止表单默认提交行为，避免页面刷新跳转
    event.preventDefault();

    let isValid = true;
    const emailRegex = /^\w+([-+.'][^\s]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;

    // 重置所有字段的边框样式
    $('#prenom, #nom, #email, #sujet, #message').removeClass('error-border success-border');

    // 验证Prénom
    if ($('#prenom').val().trim() === '') {
        $('#prenom').addClass('error-border');
        isValid = false;
    } else {
        $('#prenom').addClass('success-border');
    }

    // 验证Nom de Famille
    if ($('#nom').val().trim() === '') {
        $('#nom').addClass('error-border');
        isValid = false;
    } else {
        $('#nom').addClass('success-border');
    }

    // 验证邮箱
    const emailVal = $('#email').val().trim();
    if (emailVal === '') {
        $('#email').addClass('error-border');
        isValid = false;
    } else if (!emailRegex.test(emailVal)) {
        $('#email').addClass('error-border');
        alert('Courriel Invalide');
        isValid = false;
    } else {
        $('#email').addClass('success-border');
    }

    // 验证Sujet
    if ($('#sujet').val().trim() === '') {
        $('#sujet').addClass('error-border');
        isValid = false;
    } else {
        $('#sujet').addClass('success-border');
    }

    // 验证Message
    if ($('#message').val().trim() === '') {
        $('#message').addClass('error-border');
        isValid = false;
    } else {
        $('#message').addClass('success-border');
    }

    // 验证失败时滚动到表单位置
    if (!isValid) {
        alert('Veuillez remplir tous les champs obligatoires');
        $('#contactForm')[0].scrollIntoView({ behavior: 'smooth', block: 'center' });
        return;
    }

    // 验证通过后的逻辑（可替换为实际表单提交代码）
    alert('Formulaire envoyé avec succès !');
    // 可选：验证通过后清空表单
    // $('#contactForm')[0].reset();
});

jQuery核心修复点 #

1. 阻止默认提交：通过event.preventDefault()彻底避免页面刷新，保留用户所有输入内容
2. 批量验证所有字段：不再仅提示第一个错误，而是逐个检查所有字段，标记全部错误项
3. 统一样式管理：用CSS类替代内联样式，代码更简洁易维护
4. 滚动定位：验证失败时调用scrollIntoView()，平滑滚动到表单区域，确保用户停留在表单位置
5. 修复原逻辑错误：修正了原代码中验证Prénom时错误标记Nom字段边框的问题

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