A form isn't working when showing mobile view-CodePudding

I'm trying to set a mobile view for my site. In this particular case i have to show two different forms according to the width of the page (under 400px it shows the "login-form-mobile"). The form submit is handled by a js function, the problem is that the function works only on the first form (over 400px), the second one submit without checking if inputs are empty etc... Does someone knows why?

function validaReg() {
  if (document.formregistrazione.nome.value === "") {
    togglediv("invalidname");
    invalidForm("nome");
    return false;
  }

  if (document.formregistrazione.email.value === "") {
    togglediv("invalidemail");
    invalidForm("email");
    return false;
  }

  if (document.formregistrazione.username.value === "") {
    togglediv("invalidusername");
    invalidForm("username");
    return false;
  }

  if (document.formregistrazione.password.value === "") {
    togglediv("invalidpassword");
    invalidForm("password");
    return false;
  }

  if (document.formregistrazione.ripeti_password.value === "") {
    togglediv("invalidrippassword");
    invalidForm("ripeti_password");
    return false;
  }

  var pw1 = document.getElementById("password");
  var pw2 = document.getElementById("ripeti_password");
  var id = document.getElementById("invalidrippassword");
  if (pw2.value != pw1.value) {
    pw2.classList.add("is-invalid");
    id.style.display = 'block';
    return false;
  }

  return true;
}

<div id="login-form" >
  <div >
    <img id="logo"  src="Fubles.png">
    <img id="logo-mobile"  src="Fubles-mobile.png">
  </div>

  <form  style="width:50%;" method="post" name="formregistrazione" onSubmit="return validaReg();" action="checkReg.php">
    <div>
      <div >
        <div >
          <label for="nome">Nome</label>
          <input type="text"  id="nome" name="inputname" placeholder="Name" onChange="retogglediv('invalidname'); retogglediv2('nome');">
          <div id="invalidname"  style="display: none;">
            Inserire un nome
          </div>
        </div>

        <div >
          <label for="cognome">Email</label>
          <input type="email"  id="email" name="inputemail" placeholder="Email" onChange="retogglediv('invalidemail'); retogglediv2('email');">
          <div id="invalidemail"  style="display: none;">
            Inserire una email
          </div>
        </div>
        <div >
          <label for="username">Username</label>
          <div >
            <div >
              <span  id="inputGroupPrepend3">@</span>
            </div>
            <input type="text"  id="username" name="inputusername" placeholder="Username" aria-describedby="inputGroupPrepend3" onChange="retogglediv('invalidusername'); retogglediv2('username');">
            <div id="invalidusername"  style="display: none;">
              Scegli un username
            </div>
          </div>
        </div>
      </div>



      <div >
        <div >
          <label for="stato">Password</label>
          <input type="password"  id="password" name="inputpassword" placeholder="Password" onChange="retogglediv('invalidpassword'); retogglediv2('password');">
          <div id="invalidpassword"  style="display: none;">
            Scegli una password
          </div>
        </div>
        <div >
          <label for="cap">Ripeti password</label>
          <input type="password"  id="ripeti_password" placeholder="Password" onChange="retogglediv('invalidrippassword'); retogglediv2('ripeti_password');">
          <div id="invalidrippassword"  style="display: none;">
            La password deve corrispondere!
          </div>
        </div>
        <div >
          <div >
            <input type="radio" id="male" name="sex" value="M"  checked>
            <label  for="male">Uomo</label>
          </div>
          <div >
            <input type="radio" id="female" name="sex" value="F" >
            <label  for="female">Donna</label>
          </div>
        </div>
      </div>

      <div >
        <div >
          <button  name="submit" type="submit">Registrati</button>
        </div>
      </div>
    </div>
  </form>
</div>
<div style="overflow-y: scroll; margin-top: 5%;" id="login-form-mobile" >
  <div >
    <img id="logo"  src="Fubles.png">
    <img id="logo-mobile"  src="Fubles-mobile.png">
  </div>

  <form method="post" name="formregistrazione" onSubmit="return validaReg();" action="checkReg.php">
    <div>
      <div >
        <div >
          <label for="nome">Nome</label>
          <input type="text"  id="nome" name="inputname" placeholder="Name" onChange="retogglediv('invalidname'); retogglediv2('nome');">
          <div id="invalidname"  style="display: none;">
            Inserire un nome
          </div>
        </div>

        <div >
          <label for="cognome">Email</label>
          <input type="email"  id="email" name="inputemail" placeholder="Email" onChange="retogglediv('invalidemail'); retogglediv2('email');">
          <div id="invalidemail"  style="display: none;">
            Inserire una email
          </div>
        </div>
        <div >
          <label for="username">Username</label>
          <div >
            <div >
              <span  id="inputGroupPrepend3">@</span>
            </div>
            <input type="text"  id="username" name="inputusername" placeholder="Username" aria-describedby="inputGroupPrepend3" onChange="retogglediv('invalidusername'); retogglediv2('username');">
            <div id="invalidusername"  style="display: none;">
              Scegli un username
            </div>
          </div>
        </div>
      </div>



      <div >
        <div >
          <label for="stato">Password</label>
          <input type="password"  id="password" name="inputpassword" placeholder="Password" onChange="retogglediv('invalidpassword'); retogglediv2('password');">
          <div id="invalidpassword"  style="display: none;">
            Scegli una password
          </div>
        </div>
        <div >
          <label for="cap">Ripeti password</label>
          <input type="password"  id="ripeti_password" placeholder="Password" onChange="retogglediv('invalidrippassword'); retogglediv2('ripeti_password');">
          <div id="invalidrippassword"  style="display: none;">
            La password deve corrispondere!
          </div>
        </div>
        <div >
          <div >
            <input type="radio" id="male" name="sex" value="M"  checked>
            <label  for="male">Uomo</label>
          </div>
          <div >
            <input type="radio" id="female" name="sex" value="F" >
            <label  for="female">Donna</label>
          </div>
        </div>
      </div>

      <div >
        <div >
          <button  name="submit" type="submit">Registrati</button>
        </div>
      </div>
    </div>
  </form>
</div>

CodePudding user response：

Your form is not working because you have a bug in the lines that start with document.formregistrazione. You are trying to read a value from undefined. Instead you can access your field value like this document.formregistrazione["0"]["0"].value.

Note: if you are trying to test the second form replace document.formregistrazione["0"]["0"].value by document.formregistrazione["1"]["0"].value! (Replace the first "0" by "1")

function validaReg() {
    console.log(document.formregistrazione);
    if (document.formregistrazione["0"]["0"].value === "") {
        togglediv("invalidname");
        invalidForm("nome");
        return false;
    }
    if (document.formregistrazione["0"]["1"].value === "") {
        togglediv("invalidemail");
        invalidForm("email");
        return false;
    }
    if (document.formregistrazione["0"]["2"].value === "") {
        togglediv("invalidusername");
        invalidForm("username");
        return false;
    }
    if (document.formregistrazione["0"]["3"].value === "") {
        togglediv("invalidpassword");
        invalidForm("password");
        return false;
    }
    if (document.formregistrazione["0"]["4"].value === "") {
        togglediv("invalidrippassword");
        invalidForm("ripeti_password");
        return false;
    }
    var pw1 = document.getElementById("password");
    var pw2 = document.getElementById("ripeti_password");
    var id = document.getElementById("invalidrippassword");
    if (pw2.value != pw1.value) {
        pw2.classList.add("is-invalid");
        id.style.display = 'block';
        return false;
    }
    return true;
}