JS表单提交问题
[英]Issue with JS form submission
问题描述
This is with regard to an ongoing question asked previously.
这是关于之前提出的一个持续问题。 I am trying to make a contact form to work using HTML, CSS and JavaScript.我正在尝试使用 HTML、CSS 和 JavaScript 制作联系表格。 All my conditions seem to be working fine.我所有的条件似乎都运行良好。 The issue here is that whenever I fail to enter a particular field, and later re-enter it, the error message is still being displayed.这里的问题是，每当我未能输入特定字段，然后重新输入时，错误消息仍然会显示。 Also, I want the user to be redirected to another HTML page once he clicks on Submit and once all conditions are satisfied.另外，我希望用户在单击提交并且满足所有条件后被重定向到另一个 HTML 页面。 I would like some guidance on the same.我想要一些相同的指导。 Herewith attaching the code for reference.特附上代码供参考。
<,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
If I were you, I would add event listeners (on change) for each of the inputs.如果我是你，我会为每个输入添加事件侦听器（更改时）。 Then save the value of those inputs to variables and clear the error message of that particular input.然后将这些输入的值保存到变量并清除该特定输入的错误消息。 This way makes the most sense to me from a user experience perspective.从用户体验的角度来看，这种方式对我来说最有意义。
As for the submit function's redirect, just use one of the ways W3Schools suggests:至于提交函数的重定向，只需使用W3Schools建议的方式之一：
// Simulate a mouse click:
window.location.href = "http://www.w3schools.com";
// Simulate an HTTP redirect:
window.location.replace("http://www.w3schools.com")
Also,还，
document.getElementById("firstnameerror").innerHTML.style = "none";
wont work.不会工作。 What you're looking for is probably either clearing the text:您正在寻找的可能是清除文本：
document.getElementById("firstnameerror").innerHTML = "";
Or hiding the element itself:或者隐藏元素本身：
document.getElementById("firstnameerror").style.display = "none";
解决方案2
0 2021-03-19 14:31:04
.style = "none" won't work. .style = "none"不起作用。 .style.display = "none" is probably what you want. .style.display = "none"可能是你想要的。
Also, you can probably do everything (or nearly everything) of what you're checking in Javascript via HTML form validation as well, eg required attribute.此外，您还可以通过 HTML 表单验证来完成您在 Javascript 中检查的所有内容（或几乎所有内容），例如必需的属性。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.