A form isn't working when showing mobile view

Question

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" class="container-form fade-in-image">
  <div class="fade-in-image col-md-12 mb-3">
    <img id="logo" class="img-fluid" src="Fubles.png">
    <img id="logo-mobile" class="img-fluid" src="Fubles-mobile.png">
  </div>

  <form class="ctr-form" style="width:50%;" method="post" name="formregistrazione" onSubmit="return validaReg();" action="checkReg.php">
    <div>
      <div class="row justify-content-md-center">
        <div class="col-md-3 mb-3">
          <label for="nome">Nome</label>
          <input type="text" class="form-control" id="nome" name="inputname" placeholder="Name" onChange="retogglediv('invalidname'); retogglediv2('nome');">
          <div id="invalidname" class="invalid-feedback" style="display: none;">
            Inserire un nome
          </div>
        </div>

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



      <div class="row justify-content-md-center">
        <div class="col-md-3 mb-3">
          <label for="stato">Password</label>
          <input type="password" class="form-control" id="password" name="inputpassword" placeholder="Password" onChange="retogglediv('invalidpassword'); retogglediv2('password');">
          <div id="invalidpassword" class="invalid-feedback" style="display: none;">
            Scegli una password
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <label for="cap">Ripeti password</label>
          <input type="password" class="form-control" id="ripeti_password" placeholder="Password" onChange="retogglediv('invalidrippassword'); retogglediv2('ripeti_password');">
          <div id="invalidrippassword" class="invalid-feedback" style="display: none;">
            La password deve corrispondere!
          </div>
        </div>
        <div class="col-md-2 mb-3">
          <div class="custom-control custom-radio">
            <input type="radio" id="male" name="sex" value="M" class="custom-control-input" checked>
            <label class="custom-control-label" for="male">Uomo</label>
          </div>
          <div class="custom-control custom-radio">
            <input type="radio" id="female" name="sex" value="F" class="custom-control-input">
            <label class="custom-control-label" for="female">Donna</label>
          </div>
        </div>
      </div>

      <div class="row justify-content-md-center">
        <div class="col-md-3 mb-3">
          <button class="btn btn-signup justify-content-md-center" name="submit" type="submit">Registrati</button>
        </div>
      </div>
    </div>
  </form>
</div>
<div style="overflow-y: scroll; margin-top: 5%;" id="login-form-mobile" class="container-form fade-in-image">
  <div class="fade-in-image col-md-12 mb-3">
    <img id="logo" class="img-fluid" src="Fubles.png">
    <img id="logo-mobile" class="img-fluid" src="Fubles-mobile.png">
  </div>

  <form method="post" name="formregistrazione" onSubmit="return validaReg();" action="checkReg.php">
    <div>
      <div class="row justify-content-md-center">
        <div class="col-md-3 mb-3">
          <label for="nome">Nome</label>
          <input type="text" class="form-control" id="nome" name="inputname" placeholder="Name" onChange="retogglediv('invalidname'); retogglediv2('nome');">
          <div id="invalidname" class="invalid-feedback" style="display: none;">
            Inserire un nome
          </div>
        </div>

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



      <div class="row justify-content-md-center">
        <div class="col-md-3 mb-3">
          <label for="stato">Password</label>
          <input type="password" class="form-control" id="password" name="inputpassword" placeholder="Password" onChange="retogglediv('invalidpassword'); retogglediv2('password');">
          <div id="invalidpassword" class="invalid-feedback" style="display: none;">
            Scegli una password
          </div>
        </div>
        <div class="col-md-3 mb-3">
          <label for="cap">Ripeti password</label>
          <input type="password" class="form-control" id="ripeti_password" placeholder="Password" onChange="retogglediv('invalidrippassword'); retogglediv2('ripeti_password');">
          <div id="invalidrippassword" class="invalid-feedback" style="display: none;">
            La password deve corrispondere!
          </div>
        </div>
        <div class="col-md-2 mb-3">
          <div class="custom-control custom-radio">
            <input type="radio" id="male" name="sex" value="M" class="custom-control-input" checked>
            <label class="custom-control-label" for="male">Uomo</label>
          </div>
          <div class="custom-control custom-radio">
            <input type="radio" id="female" name="sex" value="F" class="custom-control-input">
            <label class="custom-control-label" for="female">Donna</label>
          </div>
        </div>
      </div>

      <div class="row justify-content-md-center">
        <div class="col-md-3 mb-3">
          <button class="btn btn-signup justify-content-md-center" name="submit" type="submit">Registrati</button>
        </div>
      </div>
    </div>
  </form>
</div>

Answer 1

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;
}