I'm struggling to make validation work properly when hitting the submit button. No alert messages appear, even though I should be receiving alerts for empty fields. Can someone identify what is wrong with my code? I have tried checking the validation line by line, but still can't figure out the issue.
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
var y = document.forms["myForm"]["comment"].value;
if (x == "" && y == "") {
alert("Please fill out all required fields!");
return false;
} else if (x == "") {
alert("Please enter your name!");
return false;
} else if (y == "") {
alert("Please leave us a comment!");
return false;
} else {
if(document.getElementById('r5').checked) {
window.alert("Thank you")
}
}
}.wrapper {
display: inline-block;
}
.wrapper * {
float: right;
}
.wrapper input {
display: none;
}
label {
font-size: 30px;
}
input:checked ~ label {
color: red;
}<!doctype html>
<html>
<link REL="StyleSheet" TYPE="text/css" HREF="example2.css">
<body>
<form id ="myForm">
Name: <input type="text" id="fname">
<br><br>
Comment: <input type="input" id="comment">
<br><br>
<div class="wrapper">
<input type="radio" id="r1" name="rg1">
<label for="r1">✶</label>
<input type="radio" id="r2" name="rg1">
<label for="r2">✶</label>
<input type="radio" id="r3" name="rg1">
<label for="r3">✶</label>
<input type="radio" id="r4" name="rg1">
<label for="r4">✶</label>
<input type="radio" id="r5" name="rg1">
<label for="r5">✶</label>
</div>
<br>
<button type="button" value="Submit" onclick="validateForm"()>Submit </button>
</form>
</body>
<script src="jsreview.js"></script>
</html>Appreciate your assistance with this matter.