在选项卡更改时验证表单字段

Question

我有两个不同字段的选项卡。一种是使用电子邮件、姓名和密码字段注册，另一种是使用用户名和密码字段登录。表单操作将指向相同的 servlet 页面。那么我将如何相应地验证这两个选项卡呢？

<form name="form" action="RegisterServlet" method="post" onsubmit ="return validate()" >
<div class="login-wrap">
<div class="login-html">
    <input id="tab-1" type="radio" name="tab" class="sign-in" checked><label for="tab-1" class="tab" >Sign In</label>
    <input id="tab-2" type="radio" name="tab" class="sign-up"><label for="tab-2" class="tab">Sign Up</label>
    <div class="login-form">
        <div class="sign-in-htm">
            <div class="group">
                <label for="user1" class="label">Username</label>
                <input id="user1" name="username1" type="text" class="input" >
            </div>
            <div class="group">
                <label for="pass1" class="label">Password</label>
                <input id="pass1" name="password1" type="password" class="input" data-type="password" >
            </div>
            <span style="color:red"><%=(request.getAttribute("errMessage") == null) ? ""
 : request.getAttribute("errMessage")%></span>

            <div class="group">
                <input type="submit" name="ACTION" class="button" value="Login" >
            </div>
            <div class="hr"></div>
            <div class="foot-lnk">
                <a href="RegisterServlet?action=forgot-password">Forgot Password?</a>
            </div>
        </div>
        <div class="sign-up-htm">
            <div class="group">
                <label for="user" class="label">Username</label>
                <input id="user" name="username" type="text" class="input" >
            </div>
            <div class="group">
                <label for="pass" class="label">Password</label>
                <input id="pass" name="password" type="password" class="input" data-type="password" >
            </div>
            <div class="group">
                <label for="email" class="label">Email Address</label>
                <input id="email" name="email" type="text" class="input" >
            </div>
            <div class="group">
                <input type="submit" name="ACTION" class="button" value="Register" >
            </div>
            <div class="hr"></div>
            <div class="foot-lnk">
                <label for="tab-1">Already Member?</a>
            </div>
        </div>
    </div>
</div>

Answer 1

1. 为单选按钮添加 onchange 处理程序并确保需要 表格可见
2. 为表单提交处理程序添加验证方法。

希望这会有所帮助。

function onChangeSignIn() {
  var signIn = document.getElementsByClassName("sign-in-htm");
  signIn[0].classList.remove("disable");
  var signUp = document.getElementsByClassName("sign-up-htm");
  signUp[0].classList.add("disable");
}

function onChangeSignUp() {
  var signIn = document.getElementsByClassName("sign-in-htm");
  signIn[0].classList.add("disable");
  var signUp = document.getElementsByClassName("sign-up-htm");
  signUp[0].classList.remove("disable");
}

function validate() {
  if (document.getElementById("tab-1").checked) {
    console.log('on tab-1 - sign-in')
    // do validation for tab-1 fields
    const user1 = document.getElementById("user1").value;
    if (user1 === "") {
       console.log("Username is empty in sign-in, please enter");
       return false;
    }
  }

  if (document.getElementById("tab-2").checked) {
    console.log('on tab-2 - sign-up')
    // do validation for tab-2 fields
    const user = document.getElementById("user").value;
    if (user === "") {
       console.log("Username is empty in sign-up, please enter");
       return false
    }
  }

  return false; // or true based on validation
}

onChangeSignIn();

.disable {
 display: none;
}

<form name="form" action="RegisterServlet" method="post" onsubmit ="return validate()" >
<div class="login-wrap">
<div class="login-html">
    <input id="tab-1" type="radio" name="tab" class="sign-in"  onchange="onChangeSignIn()" checked><label for="tab-1" class="tab" >Sign In</label>
    <input id="tab-2" type="radio" name="tab" class="sign-up" onchange="onChangeSignUp()"><label for="tab-2" class="tab">Sign Up</label>
    <div class="login-form">
        <div class="sign-in-htm">
            <div class="group">
                <label for="user1" class="label">Username</label>
                <input id="user1" name="username1" type="text" class="input" >
            </div>
            <div class="group">
                <label for="pass1" class="label">Password</label>
                <input id="pass1" name="password1" type="password" class="input" data-type="password" >
            </div>
            <span style="color:red"><%=(request.getAttribute("errMessage") == null) ? ""
 : request.getAttribute("errMessage")%></span>

            <div class="group">
                <input type="submit" name="ACTION" class="button" value="Login" >
            </div>
            <div class="hr"></div>
            <div class="foot-lnk">
                <a href="RegisterServlet?action=forgot-password">Forgot Password?</a>
            </div>
        </div>
        <div class="sign-up-htm">
            <div class="group">
                <label for="user" class="label">Username</label>
                <input id="user" name="username" type="text" class="input" >
            </div>
            <div class="group">
                <label for="pass" class="label">Password</label>
                <input id="pass" name="password" type="password" class="input" data-type="password" >
            </div>
            <div class="group">
                <label for="email" class="label">Email Address</label>
                <input id="email" name="email" type="text" class="input" >
            </div>
            <div class="group">
                <input type="submit" name="ACTION" class="button" value="Register" >
            </div>
            <div class="hr"></div>
            <div class="foot-lnk">
                <label for="tab-1">Already Member?</a>
            </div>
        </div>
    </div>
</div>