CODEWITHSUNDEEP
javascripthtmlvalidation
user2404526
user2404526

Reputation:

Validation routine not working

Every time I click submit when the correct information is not filled in, there is suppoesed to be an alert message for each section and the text is supposed to turn red but it is linking staight to the linked file. If someone could help with this the I would be really greatful.

<html>
<head>
<title>Exam Entry</title>
<script language="javascript" type="text/javascript"> 
function validateForm() {
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.ExanEntry.Subject.focus();
document.getElementById('Subject').style.color="red";
result = false;
}
if (document.ExamEntry.ExamNumber.value=="") {
msg+="You must enter the ExamNumber \n";
document.ExanEntry.ExamNumber.focus();
document.getElementById('ExamNumber').style.color="red";
result = false;
}
if (document.ExamEntry.ExamNumber.value.length!=4) {
msg+="You must enter at least Four Numbers in the ExamNumber \n";
document.ExamEntry.ExamNumber.focus();
document.getElementById('ExamNumber').style.color="red";
result = false;
} 
if ( ( Examentry.Exam Level[0].checked == false ) && ( Examentry.Exam Level[1].checked == false )  && ( Examentry.Exam Level[2].checked == false )) 
{
alert 
 ( "Please select you Exam Level" ); 
  return false;
}
if(msg==""){
return result;
}
{
alert(msg)
return result;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" action="success.html">
<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>
<tr>
<td id="ExamNumber">ExamNumber</td>
<td><input type="text" name="ExamNumber" Length="4"/>
<front size="1">(Maximum characters: 4)</font></td>
</tr>
<tr>
<td id="Exam Level">Exam Level</td>
<td><input type="radio" name="age" value="GCSE">GCSE<br>
<input type="radio" name="Exam Level" value="AS">AS<br>
<input type="radio" name="Exam Level" value="A2">A2</td>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
<tr>
</tr>
</table>
</form>
</body>
</html>

This is the file It links to...

<head>
<title>Success message</title>
</head>
<body>
<H1> You entered all the data required </H1>
</body>

Upvotes: 0

Views: 672

Answers (2)

Stephen Byrne
Stephen Byrne

Reputation: 7485

This line:

if ( ( Examentry.Exam Level[0].checked == false ) && ( Examentry.Exam Level[1].checked == false )  && ( Examentry.Exam Level[2].checked == false ))

contains syntax errors (space between "Exam" and "Level" ) that are preventing your script from running. If you remove the spaces between "Exam" and "Level" , it will work:

 if ( ( Examentry.ExamLevel[0].checked == false ) && ( Examentry.ExamLevel[1].checked == false )  && ( Examentry.ExamLevel[2].checked == false ))

Update:You will also need to modify the id tags of the actual HTML elements themselves to remove the spaces. e.g <td id="Exam Level"> becomes <td id="ExamLevel">

I would recommend keeping your browser dev. tools (F12 in most browsers) open when testing things like this, as script synatx errors will normally be flagged right away.

Upvotes: 1

Praveen
Praveen

Reputation: 56501

This might be your problem. Remove ;

function validateForm(); { //-----> Remove ;
//rest of your code
}

Also you should take a look at validationEngine plugin or jQuery validate.

Upvotes: 0

Related Questions