表单验证通过后仍无法提交至Servlet的技术问题求助

问题概况 #

理想预期 #

• 表单验证通过时，提交数据至Servlet；
• 验证不通过时，显示对应错误提示。

实际表现 #

输入错误内容时，表单拦截正常；但输入正确内容时，表单无法提交至Servlet，同时SweetAlert弹窗也无法正常显示。

用户提供代码 #

JavaScript代码 #

const form = document.getElementById('register-form');
const fname = document.getElementById('fname');
const lname = document.getElementById('lname');
const email = document.getElementById('email');
const password = document.getElementById('password');

const sendData = (fnameVal, sRate, count) => {
    if (sRate === count) {
        swal("Congratulations " + fnameVal + " !", "Account Created Successfully", "success");
        form.submit();
    }
}

const successMsg = (fnameVal) => {
    let formG = document.getElementsByClassName('form-group');
    var count = formG.length - 1;
    for (var i = 0; i < formG.length; i++) {
        if (formG[i].className === "form-group success") {
            var sRate = 0 + i;
            sendData(fnameVal, sRate, count);
        } else {
            return false;
        }
    }
}

const isEmail = (emailVal) => {
    var re = /^\S+@\S+\.\S+$/;
    if (!re.test(emailVal)) return false;
    var atSymbol = emailVal.indexOf("@");
    if (atSymbol < 1) return false;
    var dot = emailVal.indexOf('.');
    if (dot === emailVal.length - 1) return false;
    return true;
}

const isPassword = (passwordVal) => {
    var re = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,}$/;
    if (!re.test(passwordVal)) {
        return false;
    } 
    return true;
}

const validate = () => {
    const fnameVal = fname.value.trim();
    const lnameVal = lname.value.trim();
    const emailVal = email.value.trim();
    const passwordVal = password.value.trim();
        
    // validate first-name
    if (fnameVal.length <= 2) {
        setErrorMsg(fname, 'first-name requires min 3 char');
    } else {
        setSuccessMsg(fname);
    }

    // check last-name
    if (lnameVal.length <= 2) {
        setErrorMsg(lname, 'last-name requires min 3 char');
    } else {
        setSuccessMsg(lname);
    }

    // check email
    if (!isEmail(emailVal)) {
        setErrorMsg(email, 'not valide email');
    } else {
        setSuccessMsg(email);
    }

    // check password
    if (!isPassword(passwordVal)) {
        setErrorMsg(password, "min 8 char, at least 1 uppercase and lowercase letter, one number and special character");
    } else {
        setSuccessMsg(password);
    }
    successMsg(fnameVal);
}

function setErrorMsg(input, errormsgs) {
    const formGroup = input.parentElement;
    const small = formGroup.querySelector('small');
    formGroup.className = "form-group error";
    small.innerText = errormsgs;
}

function setSuccessMsg(input) {
    const formGroup = input.parentElement;
    formGroup.className = "form-group success";
}

var s = document.getElementById("status").value;
if (s == "success") {
    swal("Congratulations", "Account Created Successfully", "success");
} 

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QuizzBuzz Sign-Up Portal</title>

    <link rel="stylesheet" href="./css/registration-style.css">

    <!--font-->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
</head>
<body>
<input type="hidden" name="hiddenalert" id = "status" value = "<%= request.getAttribute("hiddenalert") %>">
    <div class="main">
        <section class="signup">
            <div class="container">
                <div class="signup-content">
                    <div class="signup-image">
                        <figure>
                            <img src="./images/signup-image.jpg" alt="singup-image">
                        </figure>
                    </div>
                    <div class="signup-form">
                        <h2 class="title">Create an Account</h2>
                        <form method="post" action="Register" class="register-form" id="register-form">
                            <div class="form-group">
                                <select id="userType" class="userType" name="userType" required="required">
                                    <option value="student">Student</option>
                                    <option value="teacher">Teacher</option>
                                    <option value="admin">Admin</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <input type="text" name="firstname" id="fname" placeholder="Enter your first-name" autocomplete="off" required="required">
                                <i class="fa-solid fa-circle-check"></i>
                                <i class="fa-solid fa-exclamation-circle"></i>
                                <small>Error!</small>
                            </div>
                            <div class="form-group">
                                <input type="text" name="lastname" id="lname" placeholder="Enter your last-name" autocomplete="off" required="required">
                                <i class="fa-solid fa-circle-check"></i>
                                <i class="fa-solid fa-exclamation-circle"></i>
                                <small>Error!</small>
                            </div>
                            <div class="form-group">
                                <input type="email" name="email" id="email" placeholder="Enter your Email ID" autocomplete="off" required="required">
                                <i class="fa-solid fa-circle-check"></i>
                                <i class="fa-solid fa-exclamation-circle"></i>
                                <small>Error!</small>
                            </div>
                            <div class="form-group">
                                <input type="password" name="password" id="password" placeholder="Enter your password" autocomplete="off" required="required">
                                <i class="fa-solid fa-circle-check"></i>
                                <i class="fa-solid fa-exclamation-circle"></i>
                                <small>Error!</small>
                            </div>
                            <input type="submit" value="Submit" onclick = "event.preventDefault(); validate()"  class="button">
                        </form>
                    </div>
                </div>
            </div>
        </section>
    </div>

    <script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
    <script src="./js/member-registration.js"></script>
</body>
</html>

问题分析与修复方案 #

1. 表单无法提交的核心问题 #

问题点：successMsg函数逻辑错误

当前函数在循环中，只要第一个表单组是success类就调用sendData，此时sRate = i（如第一个组i=0），而count = formG.length -1（总5个组时count=4），0≠4导致无法触发form.submit()；若遇到非success组则直接返回false，未遍历所有组完成验证。

修复代码：

const successMsg = (fnameVal) => {
    let formG = document.getElementsByClassName('form-group');
    let successCount = 0;
    const totalGroups = formG.length;
    // 遍历所有表单组，统计验证通过的数量
    for (var i = 0; i < formG.length; i++) {
        if (formG[i].className === "form-group success") {
            successCount++;
        } else {
            // 存在未通过验证的组，直接返回
            return false;
        }
    }
    // 所有组都验证通过时，调用sendData
    if (successCount === totalGroups) {
        sendData(fnameVal, successCount, totalGroups);
    }
}

优化事件绑定

将按钮onclick阻止默认提交的逻辑，改为绑定表单submit事件，逻辑更规范：

• 修改HTML提交按钮，移除onclick属性：

<input type="submit" value="Submit" class="button">

• 在JavaScript末尾添加事件监听：

form.addEventListener('submit', function(e) {
    e.preventDefault();
    validate();
});

2. SweetAlert无法工作的问题 #

问题点：异步弹窗与表单提交冲突

swal是异步执行的，当前代码先调用弹窗再立即提交表单，页面会直接跳转导致弹窗无法显示。

修复代码：

在sendData中，通过then()回调在弹窗关闭后再提交表单：

const sendData = (fnameVal, sRate, count) => {
    if (sRate === count) {
        swal("Congratulations " + fnameVal + " !", "Account Created Successfully", "success")
        .then(() => {
            form.submit(); // 弹窗确认后再提交表单
        });
    }
}

额外检查：

确保SweetAlert脚本加载正常，若CDN无法访问，可替换为本地下载的脚本文件。

3. 其他优化建议 #

• 为userType选择框添加验证逻辑（虽已设置required，但统一加入自定义验证更完整）：

  // 先获取userType元素
  const userType = document.getElementById('userType');
  
  // 在validate函数中添加
  const userTypeVal = userType.value;
  if (!userTypeVal) {
      setErrorMsg(userType, 'Please select a user type');
  } else {
      setSuccessMsg(userType);
  }
  

• 修正isEmail函数中的拼写错误：将not valide email改为not valid email。

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