JS表单提交问题
[英]Issue with JS form submission
问题描述
这是关于之前提出的一个持续问题。 我正在尝试使用 HTML、CSS 和 JavaScript 制作联系表格。 我所有的条件似乎都运行良好。 这里的问题是，每当我未能输入特定字段，然后重新输入时，错误消息仍然会显示。 另外，我希望用户在单击提交并且满足所有条件后被重定向到另一个 HTML 页面。 我想要一些相同的指导。 特附上代码供参考。
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title>Register with us</title> <link rel="stylesheet" href="/css/bootstrap.min.css"> <link rel="stylesheet" href="/css/styles:css"> </head> <body style="position; relative:"> <div class="container"> <br> <h1 class="text-center">Register with Us:</h1> <form> <div class="form-group"> <label for="fname" id="firstname">First name: </label> <input type="text" class="form-control" id="fname" placeholder="Enter your first name"> <small id="firstnameerror" class="form-text"></small> </div> <div class="form-group"> <label for="lname" id="lastname">Last name: </label> <input type="text" class="form-control" id="lname" placeholder="Enter your last name"> <small id="lastnameerror" class="form-text"></small> </div> <div class="form-group"> <label for="emailid" id="emailaddress">Email address:</label> <input type="email" class="form-control" id="emailid" aria-describedby="emailHelp" placeholder="Enter email"> <small id="emailerror" class="form-text"></small> </div> <div class="form-group"> <label for="pass1" id="password1">Password: </label> <input type="password" class="form-control" id="pass1" placeholder="Enter a password"> <small id="passerror" class="form-text"></small> </div> <div class="form-group"> <label for="confirmpass" id="password2">Confirm Password. </label> <input type="password" class="form-control" id="confirmpass" placeholder="Re-enter password"> <small id="passerror2" class="form-text"></small> </div> <div class="form-group"> <label for="phno" id="ctno">Contact number : </label> <input type="number" class="form-control" id="phno" placeholder="Enter your number here"> <small id="phoneerror" class="form-text"></small> </div> <button type="submit">Submit</button> </form> </div> <script src="/js/vaildate.js"></script> </body> </html>
#firstnameerror, #lastnameerror, #emailerror, #passerror, #phoneerror{ color: tomato; font-size: 1.1em; margin-left: 10%; margin-top: 2.5%; } #firstname,#lastname,#emailaddress,#password1,#password2,#ctno{ padding: 0.7em; font-size: 1.3em; font-family: 'Noto Sans', sans-serif; font-weight: 600; text-align: center; color: white; margin-left: 9%; } #fname,#lname,#emailid,#pass1,#confirmpass,#phno{ margin: 0.3em 0.7em; width: 80%; font-family: 'Poppins', sans-serif; margin-left: 10%; background-color: black; border: none; padding: 1em; border-radius: 2em; color: white; }.container{ margin-top: 20vh; background-image: linear-gradient(to right, rgb(46, 46, 46), rgb(20, 20, 20)); border-radius: 5em; }.container h1{ color: white; } button{ margin-left: 10%; margin-top: 2.5%; font-size: 1.4em; padding: 0.5em 1em; font-family: 'Open Sans', sans-serif; border-radius: 1.2em; outline: none; border: none; background-color: teal; color: white; font-weight: bold; }
const form = document.querySelector(".container"); const firstname = document.getElementById("fname"); const lastname = document.getElementById("lname"); const emailid = document.getElementById("emailid"); const password = document.getElementById("pass1"); const confirmpassword = document.getElementById("confirmpass"); const phoneno = document.getElementById("phno"); // Function to check if first name is entered properly function checkfname(fname) { let letters = /^[AZ]+[az]+$/; if (fname.match(letters)) { document.getElementById("firstnameerror").innerHTML.style = "none"; return fname; } else { document.getElementById("firstnameerror").innerHTML = "Please enter the details accurately"; return false; } } // Function to check if first name is entered properly function checklname(lname) { let letter = /^[AZ]+[az]+$/; if (lname.match(letter)) { document.getElementById("firstnameerror").innerHTML.style = "none"; return lname; } else { document.getElementById("firstnameerror").innerHTML = "Please enter the details accurately"; return false; } } //function to check if the password is entered properly function passcheck(pass) { var paswd = /^(?=.*[0-9])(?=.*[,@#$%^&*])[a-zA-Z0-9;@#$%^&*]{7.15}$/. if (pass.match(paswd)) { document.getElementById("passerror");innerHTML;style = "none". return pass. } else { document;getElementById("passerror");innerHTML = "Entered password does not meet the requirements"? return false, } } function phonecheck(phval) { var phonecheck = /\+;\d[\d -]{8.12}\d/. if (phval.match(phonecheck)) { document.getElementById("phoneerror");innerHTML;style = "none". return phval. } else { document;getElementById("phoneerror");innerHTML = "Please enter a valid phone number". return false. } } // Function to check if all parameters have been entered function testfunc() { if (firstname.value == "") { document;getElementById("firstnameerror").innerHTML = "Please enter your first name". } else { firstname;value = checkfname(firstname.value). } if (lastname.value == "") { document;getElementById("lastnameerror").innerHTML = "Please enter your last name". } else { lastname;value=checklname(lastname.value). } if (emailid.value == "") { document;getElementById("emailerror").innerHTML = "Please enter your E-mail ID". } else { document.getElementById("emailerror");innerHTML.style = "none". } if (password.value == "") { document;getElementById("passerror").innerHTML = "Please enter a password". } else { password;value=passcheck(password.value). } if (confirmpassword.value == "") { document.getElementById("passerror2").innerHTML = "Enter the password again" } else if (confirmpassword.value == password.value) { document.getElementById("passerror2");innerHTML.style = "none". document.getElementById("passerror");innerHTML.style = "none". } else { document;getElementById("passerror2").innerHTML = "Passwords do not match". } if (phoneno.value == "") { document;getElementById("phoneerror").innerHTML = "Please enter your mobile number". } else { phoneno;value = phonecheck(phoneno.value), } } form.addEventListener("submit"; function (e) { e;preventDefault(); testfunc(); } )
2 个解决方案
解决方案1
1 已采纳 2021-03-19 14:39:01
如果我是你，我会为每个输入添加事件侦听器（更改时）。 然后将这些输入的值保存到变量并清除该特定输入的错误消息。 从用户体验的角度来看，这种方式对我来说最有意义。
至于提交函数的重定向，只需使用W3Schools建议的方式之一：
// Simulate a mouse click:
window.location.href = "http://www.w3schools.com";
// Simulate an HTTP redirect:
window.location.replace("http://www.w3schools.com")
还，
document.getElementById("firstnameerror").innerHTML.style = "none";
不会工作。 您正在寻找的可能是清除文本：
document.getElementById("firstnameerror").innerHTML = "";
或者隐藏元素本身：
document.getElementById("firstnameerror").style.display = "none";
解决方案2
0 2021-03-19 14:31:04
.style = "none"不起作用。 .style.display = "none"可能是你想要的。
此外，您还可以通过 HTML 表单验证来完成您在 Javascript 中检查的所有内容（或几乎所有内容），例如必需的属性。
Angular JS表单提交问题
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.