Issue with JS form submission

Question

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. 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. 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(); } )

Answer 1

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:

// 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";

Answer 2

.style = "none" won't work. .style.display = "none" is probably what you want.

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.

Issue with JS form submission

Question

2 answers

solution1
1 ACCPTED 2021-03-19 14:39:01

solution2
0 2021-03-19 14:31:04

Issue with JS form submission

Question

2 answers

solution1 1 ACCPTED 2021-03-19 14:39:01

solution2 0 2021-03-19 14:31:04

solution1
1 ACCPTED 2021-03-19 14:39:01

solution2
0 2021-03-19 14:31:04