CODEWITHSUNDEEP
javascripthtmlformsvalidation
user3641168
user3641168

Reputation:

JavaScript radio buttons html web form

I am currently using html to code a 'form entry'. I am also using a JavaScript validation, to validate the input in of the form. At the moment, i have 'name', 'subject' and 'examination number', each working and having functional validations. For the 'qualification' fields, I have radio buttons where the user has to click-select their qualification. I have the validation in place, but unfortunately I cant get the field to be highlighted in red and display the error message when the form is submitted and the 'qualification' has been left blank. everything works apart from the qualification field. It would be great if someone could fix the validation of the 'qualification' so that when the field is left emty, the text will be highlighted and the error message will be included. thanks

here is my code:

<html>
<head>

<title>Exam Entry</title>

<script language="javascript" type="text/javascript">
function qualinform(qualname) {
alert(qualname + " was selected as your qualification.");
}

function validateForm(e) {

var result = true;
var msg="";

if (document.ExamEntry.name.value=="") {
msg+="You must enter your name \n";
document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}

if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}

if (document.ExamEntry.group1.value=="") {
msg+="You must choose a qualification\n";
document.ExamEntry.group1.focus();
document.getElementById('radioqual').style.color="red";
result = false;
}

var regex = /^\d{4}$/;
if (document.ExamEntry.Examination_number.value == "") {
msg+="You must enter your examination number";
document.getElementById('Examination_number').style.color="red";
result = false;
} else if (isNaN(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should only contain digits";
document.getElementById('Examination_number').style.color="red";
result = false;
} else if (!regex.test(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should contain exactly 4 digits";
document.getElementById('Examination_number').style.color="red";
result = false;
}

if (msg != "") {
alert(msg);
}

return result;
}
</script>



</head>

<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html" onsubmit="return     validateForm();">
<table width=”50%” border=”0”> 
<tr>
    <td id="name">Name</td>
    <td><input type="text" name="name" /></td>
</tr>
<tr>
    <td id="subject">Subject</td>
    <td><input type="text" name="subject" /></td>
</tr>
    <td id="Examination_number">Examination number</td>
    <td><input type="text" maxlength="4" name="Examination_number" /></td>
</tr>
<tr>
<td id="qualification">Choose your qualification</td>
<tr>
<td id="radioqual">
<input onclick="qualinform('GCSE');" type="radio" name="group1" value="GCSE">GCSE<br>
<input onclick="qualinform('AS');" type="radio" name="group1" value="AS">AS<br>
<input onclick="qualinform('A2');" type="radio" name="group1" value="A2">A2<br>
</td>
</tr>
<tr>
    <td><input type="submit" name="Submit" value="Submit" /></td>
    <td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>

</html>

Upvotes: 0

Views: 156

Answers (1)

indubitablee
indubitablee

Reputation: 8206

the return value of the group1 radio buttons when none are selected is undefined, not "" as you expected, so you need to change the condition in the if statement

if (document.ExamEntry.group1.value==undefined)

Upvotes: 1

Related Questions