javascript - 显示移动视图时表单不起作用

Question

我正在尝试为我的网站设置移动视图。在这种特殊情况下，我必须根据页面的宽度显示两种不同的表单（在 400 像素以下显示“登录表单移动”）。表单提交由 js 函数处理，问题是该函数仅适用于第一个表单（超过 400 像素），第二个提交而不检查输入是否为空等......有人知道为什么吗？

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

您的表单无法正常工作，因为您在以 document.formregistrazione. 开头的行中存在错误您正在尝试从 undefined 读取 value。相反，您可以像 document.formregistrazione["0"]["0"].value 一样访问您的字段 value。

注意：如果您尝试测试第二种形式，请将 document.formregistrazione["0"]["0"].value 替换为 document.formregistrazione["1"]["0"].value！（将第一个“0”替换为“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;
}

javascript - 显示移动视图时表单不起作用

回答1

相似文章

javascript - 不知道用js验证我的表单中的textarea

amazon-web-services - 捕获 DynamoDB 更改

c++ - 返回局部变量是否会返回副本并破坏原始变量？

c++ - 如何定义全局变量而不导致多次声明同一个变量的问题？

c++ - Direct initialization != copy initialization 从不同类型转换时？

随机推荐

最新文章

回答1

相似文章

热门标签

随机推荐

最新文章