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

Question

I have two tabs with different fields. One is sign-up with email,name and password fields the other is for login with username and password field. The form action will point to same servlet page. So how will i validate those two tabs accordingly?

<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. Add onchange handlers for radio buttons and make sure desired form is visible
2. Add validate method for form onsubmit handler.

Hope this helps.

 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>