HTML頁面中的多種形式

Question

我有一個表單，其中兩個div包含不同的“表單”（即登錄和注冊表單）。 登錄div允許注冊用戶登錄，而注冊div允許新用戶創建新帳戶。 現在，我正在嘗試驗證輸入到表單中的輸入。 我的JavaScript適用於register div，但不適用於登錄div。 請如何使第二個div的javascript工作？ 我必須創建不同的表格嗎？

更新：這是JavaScript代碼：

function validateForm(){
        //create variables for tracking validation
        var valid=true;
        var msg;




        //validating the lastname field
        document.getElementById('lname').onkeyup=function(){
        if(document.getElementById('lname').value.length==0){

            document.getElementById('lnameerror').style.display='inline';
            document.getElementById('lnameerror').style.color='red';
            valid=false;
            document.getElementById('lname').focus();
        }
        else{
            document.getElementById('lnameerror').style.display='none';
        }

        }

        if(document.getElementById('lname').value.length==0){

            document.getElementById('lnameerror').style.display='inline';
            document.getElementById('lnameerror').style.color='red';
            valid=false;
            document.getElementById('lname').focus();
            msg='Please enter your last name';
        }
        else{
            document.getElementById('lnameerror').style.display='none';
        }


        //validating the firstname field
        document.getElementById('fname').onkeyup=function(){
        if(document.getElementById('fname').value.length==0){
            document.getElementById('fnameerror').style.display='inline';
            document.getElementById('fnameerror').style.color='red';
            document.getElementById('fname').focus();
        }
        else{
            document.getElementById('fnameerror').style.display='none';
        }

        }

        if(document.getElementById('fname').value.length==0){
            document.getElementById('fnameerror').style.display='inline';
            document.getElementById('fnameerror').style.color='red';
            valid=false;
            document.getElementById('fname').focus();
            msg='Please enter your first name';
        }
        else{
            document.getElementById('fnameerror').style.display='none';
        }






        //checking to see if password matches

        if(document.getElementById('cpword').value!=document.getElementById('pword').value){
            msg='Password does not match, please try again.';
            valid=false;
        }


        //Display alert on error
        if(valid==false){
            alert(msg);
        }

        return valid;
    }
    function signin_validate(){
        //VALIDATION FOR SIGN IN FORM
        //validating the password field
        document.getElementById('signin_pwordl').onkeyup=function(){
        if(document.getElementById('signin_pword').value.length==0){
            document.getElementById('signin_pworderror').style.display='inline';
            document.getElementById('signin_pworderror').style.color='red';
            document.getElementById('signin_pword').focus();
        }
        else{
            document.getElementById('signin_pworderror').style.display='none';
        }

        }
        document.getElementById('signin').onclick=function(){
        if(document.getElementById('signin_pword').value.length==0){
            document.getElementById('signin_pworderror').style.display='inline';
            document.getElementById('signin_pworderror').style.color='red';
            document.getElementById('signin_pword').focus();
        }
        else{
            document.getElementById('signin_pworderror').style.display='none';
        }
        }
        //validating the email field
        document.getElementById('signin').onclick=function(){
        if(document.getElementById('signin_email').value.length==0){
            msg='Please enter your email address';
            valid=false;
        }
        }

        //Display alert on error
        if(valid==false){
            alert(msg);
        }
    }

HTML：

<form action="Accounts.php" method="post">
  <div id="maincontent">
      <h1>Sign In Or Register</h1>
      <div id="login">

          <h2>Sign In</h2>
              <div>
                  <label for="signin_email">Email Address*: </label><input id="signin_email" type="email" placeholder="E.g you@yourdomain.com"  autofocus maxlength="50" /><span style="display:none;" id="signin_emailerror" name="signin_emailerror">*Please enter your First Name</span>
              </div>
              <div>
              <label for="signin_pword">Password*: </label><input id="signin_pword" type="password" maxlength="24"   /><span style="display:none;" id="signin_pworderror" name="signin_pworderror">*Please enter your First Name</span>
              </div>
              <div>
                  <button type="submit" id="signin" name="signin" value="Sign In" onclick="return signin_validate()">Sign in</button>
              </div>
      </div>

  <h2>OR</h2>

      <div id="register">
     <h2>Register</h2>
          <div>
                <label for="fname">First Name*: </label>                        
                <input id="fname" name="fname" maxlength="30" type="text"  /><span style="display:none;" id="fnameerror" name="fnameerror">*Please enter your First Name</span>
          </div>
          <div>
            <label for="lname">Last Name*: </label><input id="lname" name="lname" maxlength="30" type="text"  /><span style="display:none;" id="lnameerror" name="lnameerror">*Please enter your Last Name</span>
          </div>


            <button type="submit" id="register" name="register" value="Register" onclick="return validateForm()">Register</button>
          </div>

      </div>
    </div>
</form>

Answer 1

您可以使用兩種形式，一種用於登錄，另一種用於注冊。 兩種表單的優點在於，在兩種情況下，用戶都可以按“ Enter”提交表單。

    <form name="formLogin" id="formLogin" action="Login.php" method="post" onsubmit="login_validate()">
      <div id="maincontent">
          <h1>Sign In Or Register</h1>
          <div id="login">

              <h2>Sign In</h2>
                  <div>
                      <label for="signin_email">Email Address*: </label><input id="signin_email" type="email" placeholder="E.g you@yourdomain.com"  autofocus maxlength="50" /><span style="display:none;" id="signin_emailerror" name="signin_emailerror">*Please enter your First Name</span>
                  </div>
                  <div>
                  <label for="signin_pword">Password*: </label><input id="signin_pword" type="password" maxlength="24"   /><span style="display:none;" id="signin_pworderror" name="signin_pworderror">*Please enter your First Name</span>
                  </div>
                  <div>
                      <button type="submit" id="signin" name="signin" value="Sign In" onclick="login_validate()">Sign in</button>
                  </div>
          </div>
</form>    
      <h2>OR</h2>
        <form name="formRegister" id="formRegister" action="register.php" method="post" onsubmit="signin_validate()">
          <div id="register">
         <h2>Register</h2>
              <div>
                    <label for="fname">First Name*: </label>                        
                    <input id="fname" name="fname" maxlength="30" type="text"  /><span style="display:none;" id="fnameerror" name="fnameerror">*Please enter your First Name</span>
              </div>
              <div>
                <label for="lname">Last Name*: </label><input id="lname" name="lname" maxlength="30" type="text"  /><span style="display:none;" id="lnameerror" name="lnameerror">*Please enter your Last Name</span>
              </div>


                <button type="submit" id="register" name="register" value="Register" onclick="signin_validate()">Register</button>
              </div>

          </div>
        </div>

</form>