onsubmit form validation. Form submits even though there are errors

Question

I created a registration page, and each field requires entry and validation. I used the onsubmit event to call my js function to validate the form if the field is empty, however it still submits even though it has not been validated properly.

 function validate() { var streetName = document.getElementById("sN").value; if (streetName == "" || streetName == null || streetName == undefined) { window.alert("Sorry"); return false; } }

 <form name="myForms" action="https://httpbin.org/post " method="post" class="form" onsubmit="return validate()"> <div id="fN"> <label>First Name</label> <input type="text" name="firstName" placeholder="Enter first name" required> </div> <br> <div class="lN"> <label>Last Name</label> <input type="text" name="lastName" placeholder="Enter last name" required=""> </div> <br> <div class="sN"> <label>Street name</label> <input type="text" name="streetname" placeholder="Enter your street name"> </div> // Somemore inputs <input class="buttons" type="submit" name="submit" value="Sign up" onclick="validate()"> </form>

I expect a window to pop up saying "this entry is wrong and for this reason", but it submits anyway

EDIT: I apologize I should've been clearer in my post. I will use required in some of the inputs, however I will eventually need to write js code to ensure a phone number is all digits and password = passwordconfirm and a postal code is an actual postal code. In the JS file I just showed what I basically tried doing.

Answer 1

var streetName = document.getElementById("sN").value;

There is no element with that id in the document.

There is an element with sN as its class name , but getElementById won't find an element by its class and the value of <div class="sN"> will always be undefined . It is the input that will have a value.

Answer 2

Several things

1. You have validate on the submit AND on the form submit
2. You should NEVER call anything in a form "submit" since it will hide the submit event/method
3. You need to get the correct field
4. Give the form an ID and use unobtrusive code like this

 window.addEventListener("load", function() { document.getElementById("myForm").addEventListener("submit", function(e) { var errors = false; var streetName = this.streetname.value.trim(); // no more action needed if (!streetName) errors = true; // more validations if (errors) { window.alert("Sorry"); e.preventDefault(); } }); });

 <form id="myForm" action="https://httpbin.org/post " method="post" class="form"> <div id="fN"> <label>First Name</label> <input type="text" name="firstName" placeholder="Enter first name" > </div> <br> <div class="lN"> <label>Last Name</label> <input type="text" name="lastName" placeholder="Enter last name" > </div> <br> <div class="sN"> <label>Street name</label> <input type="text" name="streetname" placeholder="Enter your street name"> </div> <input class="buttons" type="submit" name="SubmitButton" value="Sign up"> </form>