OK. I have this form where I call forth an error if validation fails on submission. Problem is, it still submits to the server anyway.
I still get an alert error message for each field that fails validation. But then it submits to the server anyway. Except if its the last field that fails validation. In that case, I get the error message and it doesn’t submit.
I’m trying to figure out what I’m doing wrong. I’ve been able to prevent submission for each field when I put it in a single HTML file. But not when I put all the fields together in a HTML file.
Most of my prior form validations have been single field forms.
What am I doing wrong?
My HTML:
“
<form name="locationForm" action="https://www.w3schools.com/action_page.php" target="_blank" onsubmit="return validateForm();" method="post">
<label for="strname">Street Or PO Box Address:</label>
<input type="text" id="strname" name="strname"><br><br>
<label for="cityname">City:</label>
<input type="text" id="cityname" name="cityname"><br><br>
<label for="statename">State ( or territory ):</label>
<select id="statename" name="statename">
<option value="">Please pick your state or territory of residence:</option>
<option value="Alabama">AL</option>
<option value="Alaska">AK</option>
<option value="Arizona">AZ</option>
<option value="Arkansas">AR</option>
<option value="California">CA</option>
<option value="Colorado">CO</option>
<option value="Connecticut">CT</option>
<option value="Delaware">DE</option>
<option value="Florida">FL</option>
<option value="Georgia">GA</option>
<option value="Hawaii">HI</option>
<option value="Idaho">ID</option>
<option value="Illinois">IL</option>
<option value="Indiana">IN</option>
<option value="Iowa">IA</option>
<option value="Kansas">KS</option>
<option value="Kentucky">KY</option>
<option value="Louisiana">LA</option>
<option value="Maine">ME</option>
<option value="Maryland">MD</option>
<option value="Massachusetts">MA</option>
<option value="Michigan">MI</option>
<option value="Minnesota">MN</option>
<option value="Mississippi">MS</option>
<option value="Missouri">MO</option>
<option value="Montana">MT</option>
<option value="Nebraska">NE</option>
<option value="Nevada">NV</option>
<option value="New Hampshire">NH</option>
<option value="New Jersey">NJ</option>
<option value="New Mexico">NM</option>
<option value="New York">NY</option>
<option value="North Carolina">NC</option>
<option value="North Dakota">ND</option>
<option value="Ohio">OH</option>
<option value="Oklahoma">OK</option>
<option value="Oregon">OR</option>
<option value="Pennsylvania">PA</option>
<option value="Rhode Island">RI</option>
<option value="South Carolina">SC</option>
<option value="South Dakota">SD</option>
<option value="Tennessee">TN</option>
<option value="Texas">TX</option>
<option value="Utah">UT</option>
<option value="Vermont">VT</option>
<option value="Virginia">VA</option>
<option value="Washington">WA</option>
<option value="West Virginia">WV</option>
<option value="Wisconsin">WI</option>
<option value="Wyoming">WY</option>
<option value="District Of Columbia">DC</option>
<option value="American Samoa">AS</option>
<option value="Guam">GU</option>
<option value="Northern Mariana Islands">MP</option>
<option value="Puerto Rico">PR</option>
<option value="US Virgin Islands">VI</option>
</select><br><br>
<label for="zipcode">Zip Code:</label>
<input type="number" id="zipcode" name="zipcode"><br><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
valid = true;
let w = /^([0-9A-Za-z]+s)+([0-9A-Za-z]+s)+([0-9A-Za-z]+s)+([0-9A-Za-z])+|([A-Z]+s)+([A-Za-z]+s)+([0-9]+)$/;
if ( document.locationForm.strname.value == "" ) {
alert ( "Physical ( street or PO ) address cannot be blank" );
valid = false;
}
else if ( document.locationForm.strname.value.match ( w ) )
{ valid = true; }
else {
alert ( "A physical address can only have letters and numbers with spaces between them" );
valid = false;
}
let x = /^[A-Za-z]+$/;
if ( document.locationForm.cityname.value == "" ) {
alert ( "City name cannot be blank" );
valid = false;
}
else if ( document.locationForm.cityname.value.match ( x ) )
{ valid = true; }
else {
alert ( "A city name can only have letters in it." );
valid = false;
}
if ( document.locationForm.statename.selectedIndex == 0 ) {
alert ( "What state or territory do you live in?" );
valid = false;
}
else if ( document.locationForm.statename.selectedIndex != 0 ) {
valid = true;
}
let z = /^[0-9]{5}$/;
if ( document.locationForm.zipcode.value == "" ) {
alert ( "Zip code cannot be blank" );
valid = false;
}
else if ( document.locationForm.zipcode.value.match ( z ) )
{ valid = true; }
else {
alert ( "Zip code must have exactly five digits." );
valid = false;
}
return valid;
}
</script>
</body>
</html>
I’m trying to figure out what I’m doing wrong. I’ve been able to prevent submission for each field when I put it in a single HTML file. But not when I put all the fields together in a HTML file.
Most of my prior form validations have been single field forms.