Form validation error. Redirects to error page
Question
so I've created a form. I'm trying to use JavaScript to validate fields. When I press submit, it does nothing. It just sends me to a page saying 'Your file was not found.' I do realize that the code is mostly HTML and not JS. I've been testing as I'm going and it's not working already. Any help is appreciated
Here is my code:
function validateForm() { var firstname = document.myForm.fname.value; if (firstname === "" || firstname === " ") { alert("First name is empty!"); return false; } var middlename = document.myForm.middle.value; if (middle == "" || middle == " ") { alert("Middle name is empty"); return false; } } function validateForm() { var firstname = document.myForm.fname.value; if (firstname === "" || firstname === " ") { alert("First name is empty!"); return false; } var middlename = document.myForm.middle.value; if (middle == "" || middle == " ") { alert("Middle name is empty"); return false; } var lastname = document.myForm.lname.value; if (lastname == "" || lastname == " ") { alert("Last name is empty"); return false; } }
<!DOCTYPE html> <html> <head> <title>My form validation</title> </head> <body> <form name="myForm" action="fakeFormCheck.php" onsubmit="validateForm()" method="post"> <fieldset> *First Name: <input type="text" name="fname"> <br><br> Middle/Initial: <input type="text" name="middle"> <br><br> *Last Name: <input type="text" name="lname"> <br><br> *Email: <input type="text" name="email"> <br><br> Phone: <input type="number" name="number"> <br><br> </fieldset> <br> <fieldset> *Reason: <select name="choice"> <option value="Information">Infor reques</option> <option value="feedback">Feedback</option> <option value="other">Other</option> </select> <br><br> *Message: <br> <textarea name="message" rows="7" cols="30"> </textarea> </fieldset> <input type="submit" value="Send"> <input type="reset" value="Clear"> </form> </body> </html>
3 answers
solution1
0 2018-04-09 04:20:10
Try attaching the handler in Javascript rather than inline-eval-HTML, and using preventDefault to prevent the default form submission.
<form name="myForm" action="fakeFormCheck.php" method="post">
and
document.querySelector('form[name="myForm"]').addEventListener('submit', (e) => {
// do tests
if (invalid) {
// something is invalid, prevent the default action of submitting the form:
e.preventDefault();
}
// else the form will submit by default
});
solution2
0 ACCPTED 2018-04-09 04:25:14
Add preventDefault() to the validateForm function & return true once the form is valid
function validateForm(e) { e.preventDefault(); var firstname = document.myForm.fname.value; if (firstname === "" || firstname === " ") { alert("First name is empty!"); return false; } var middlename = document.myForm.middle.value; if (middlename == "" || middlename == " ") { alert("Middle name is empty"); return false; } }
<form name="myForm" action="fakeFormCheck.php" onsubmit="validateForm(event)" method="post"> <fieldset> *First Name: <input type="text" name="fname"> <br><br> Middle/Initial: <input type="text" name="middle"> <br><br> *Last Name: <input type="text" name="lname"> <br><br> *Email: <input type="text" name="email"> <br><br> Phone: <input type="number" name="number"> <br><br> </fieldset> <br> <fieldset> *Reason: <select name="choice"> <option value="Information">Infor reques</option> <option value="feedback">Feedback</option> <option value="other">Other</option> </select> <br><br> *Message: <br> <textarea name="message" rows="7" cols="30"> </textarea> </fieldset> <input type="submit" value="Send"> <input type="reset" value="Clear"> </form>
solution3
0 2018-04-09 04:26:58
Use return in onsubmit="validateForm()" for example onsubmit="return validateForm()" . second thing you are taking the middle name in middlename variable but your checking with some other varible if (middle == "" || middle == " ") {
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.