我正在嘗試為我的網站設定移動視圖。在這種特殊情況下，我必須根據頁面的寬度顯示兩種不同的表單（在 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>uj5u.com熱心網友回復：
document.formregistrazione.您的表單無法正常作業，因為您在以You is trying to read a valuefrom開頭的行中有一個錯誤undefined。相反，您可以像這樣訪問您的欄位值document.formregistrazione["0"]["0"].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;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/474460.html
標籤：javascript html css
上一篇：我可以在瀏覽器中找出配色方案嗎