Trying to add form validation using only JavaScript and the DOM (without HTML ID tags). The first two If statements work but getting an error for the 3rd and 4th to validate the checkbox and select fields. Keep getting "Cannot read property of undefined" Suggestions? Also, how do i "Upvote" or "accept" a suggestion on here? Thanks as always :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Validate me</title>
<script>
console.log(document.forms);
function validateForm(){
for (var i=0;i < document.forms[0].length - 1; i++){
if (document.forms[0][i].type == 'text' && document.forms[0][i].value==''){
alert('Please Enter Your Full Name');
return false;
}
else if (document.forms[0][i].type == 'radio'){
if (document.forms[0].gender[0].checked == false && document.forms[0].gender[1].checked == false){
alert('Please select gender');
return false;
}
}
else if (document.forms[0][i].type == 'checkbox'){
if (document.forms[0].hobbies[0].checked == false && document.forms[0].hobbies[1].checked == false && document.forms[0].hobbies[2].checked == false){
alert('Please select hobby');
return false;
}
}
else if (document.forms[0][i].type == 'select'){
if(document.forms[0].option[0].selected == false && document.forms[0].option[1].selected == false && document.forms[0].option[2].selected == false){
alert('Please select a favorite movie')
return false;
}
}
console.log(document.forms[0][i].type);
}
}
</script>
</head>
<body>
At lease one piece of data has to come in from every input type.
<form action = "form.html" method = "get"><br/>
Name:<input type = "text" name = "fullname" placeholder="Enter Full Name"/><br/>
Gender:<br/>
Male<input type = "radio" name = "gender" value="male"/>Female<input type = "radio" name = "gender" value="female"/><br/>
Hobbies<br/>
Baseball <input type = "checkbox" name = "hobbies[]" value = "baseball" />
Football <input type = "checkbox" name = "hobbies[]" value = "football" />
Hockey <input type = "checkbox" name = "hobbies[]" value = "hockey" /><br/>
Favorite Show <select name = "show">
<option value = "">Choose Below</option>
<option value = "ATHF">Aqua Teen Hunger Force</option>
<option value = "Family Guy">Family Guy</option>
<option value = "Simpsons">Simpsons</option>
</select><br/>
Comments<br/>
<textarea cols = "50" rows = "6" name = "comments">Enter Comments</textarea><br/>
<input type = "button" name = "submit" value = "enter me" onclick="return validateForm();" />
</form>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire