I am designing an exam entry form to take a users name, subject, exam number and level (GCSE, AS, A2), if the user inputs a value wrong then the name of the field turns red, I need a JavaScript function to change the text back to black and i am having some trouble with this. Here is my code:
<!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>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";
if(result) document.ExamEntry.name.focus();
document.getElementById('name').style.color="red";
result = false;
}
if (document.ExamEntry.subject.value=="") {
msg+="You must enter the subject \n";
if(result) document.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value=="") {
msg+="You must enter the exam number \n";
if(result) document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if (document.ExamEntry.examnumber.value.length!=4) {
msg+="Your exam number must be exactly 4 digits \n";
if(result) document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
if(msg != ""){
alert(msg);
return result;
}
var checked = null;
var inputs = document.getElementsByName('examtype');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
break;
}
}
if(checked==null) {
alert('Please choose an option');
return false;
}
else {
return confirm('You have chosen '+checked.value+' is this correct?');
}
}
</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" placeholder='Name' /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" placeholder='Subject' /></td>
</tr>
<tr>
<td id="examnumber">Exam Number</td>
<td><input type="text" name="examnumber" size="4" maxlength="4" placeholder='No.'/></td>
</tr>
<tr>
<td><input type="radio" id="examtypeGCSE" name="examtype" value="GCSE" /> : GCSE<br/>
<input type="radio" id="examtypeA2" name="examtype" value="A2" /> : A2<br/>
<input type="radio" id="examtypeAS" name="examtype" value="AS"/> : AS<br/>
</tr>
<tr>
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
In beginning of the function validateForm() set all the texts to black. Cuz everytime you enter the validate function it will set all the texts to black, then enter the if statements if the conditions is correct.
for example:
function validateForm() {
document.getElementById('name').removeAttribute('style');
....
....
...
}
but then the color wont change until you click the button.
Else add an onchange function on the textboxes to check the validation.
Related
why do I have this problem? I'm trying to get an output to the user name in the site. but it keeps giving me this problem!
I ant it to write me that the user name is not correct when im starting with a number or it is blanked at all- it gives me nothing.
please help me I am sitting on this above an hour:((
Snippet
function validateForm() {
var res = true;
res = userNameVal() && res;
return res;
}
function userNameVal() {
var userName = document.getElementById("username").value;
var msgBox = document.getElementById("userNameCheck");
if (userName.length == 0) {
msgBox.innerHTML = "You must enter user name";
msgBox.style.color = "red"
return false;
}
if (!isLetter(userName[0])) {
msgBox.innerHTML = "User name must start with a letter ";
msgBox.style.color = "red";
return false;
}
msgBox.innerHTML = "";
return true;
}
<form id="form1" method="post" onsubmit="return validateForm()">
<table class="table3">
<tr>
<td>
<label for="username">User Name:</label>
</td>
<td>
<input type="text"
name="username"
id="username"
onchange="userNameVal()" />
</td>
<td>
<div id="userNameCheck"></div>
</td>
</tr>
<tr>
<td><input type="button"
value="submit"
onclick="return validateForm()"/>
<input type="reset" value="reset" />
</td>
<td></td>
<td></td>
</tr>
</table>
</form>
File with the code bellow is "newrecord.html" presents the form for submitting some record entries that suppose to do the a db and after the users submits the form the validation function is called to check with it's functions the user input.
The form is loaded as normal but after the form is submitted the validation function is not being called and just redirects to to the "newRecord.php"
<!DOCTYPE html>
<html>
<head>
<title>insert New Record</title>
<style>
.recordform {
border:1px solid #999999;
font: normal 14px helvetica;
color: #444444
}
</style>
<script>
function validateAuthor(field)
{
return(field=="") ? "No Author Entered".\n" : ""
}
function validateTitle(field)
{
return(field=="") ? "No Title Entered".\n" : ""
}
function validateCategory(field)
{
return(field=="") ? "No Category Entered".\n" : ""
}
function validateYear(field)
{
if (field=="") return "No Year Entered.\n"
else if (field.length>4)
return "Enter Valid Year value (YYYY).\n"
else if (/[^0-9]/.test(field))
return "Enter only numbers 0-9"
return ""
}
function validateIsbn(field)
{
if (field=="") return "No Isbn Entered.\n"
else if (/[^0-9]/.test(field))
return "Enter only numbers"
return ""
}
function validate(form)
{
fail=validateAuthor(form.author.value)
fail+=validateTitle(form.title.value)
fail+=validateCategory(form.category.value)
fail+=validateYear(form.year.value)
fail+=validateIsbn(form.isbn.value)
if (fail==""){
return true;
}else{
alert(fail);
return false}
}
</script>
</head>
<body>
<table border="0" cellpading="2" cellspacing="5" bgcolor="#eeeeee">
<th colspan="2" align="center">Insert New Record</th>
<form method="post" action="newRecord.php" onsubmit="return validate(this)">
<tr><td>Author</td>
<td><input type="text" maxlength="25" name="author"</td></tr>
<tr><td>Title</td>
<td><input type="text" maxlength="25" name="title"</td></tr>
<tr><td>Category</td>
<td><input type="text" maxlength="25" name="category"</td></tr>
<tr><td>Year</td>
<td><input type="text" maxlength="25" name="year"</td></tr>
<tr><td>Isbn</td>
<td><input type="text" maxlength="25" name="isbn"</td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="Insert New Record"></td></tr>
</form>
</table>
</body>
</html>
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. However i need to add a validation for 'qualification'. The type of input has to be click select and the 'qualification' has to be radio buttons. there should be three radio buttons called 'GCSE', 'AS' and 'A2'. it would be great if someone could help me with the radio buttons, and the user should only be able to click and select one type of qualification at one time. after clicking the qualification, the user needs to be informed by a message that they have chosen their qualification 'you have selected GCSE as your qualification' this message should be immediately after they clicked their qualification. GCSE is just an example, it could be AS or A2 or GCSE. thanks.
here is my code: the radio buttons are near the bottom, but the validaiton should be below the validation of 'examination number'
<head>
<title>Exam Entry</title>
<script language="javascript" type="text/javascript">
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;
}
var regex = /^\d{4}$/;
if (document.ExamEntry.Examination_number.value == "") {
msg+="You must enter your examination number";
result = false;
} else if (isNaN(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should only contain digits";
result = false;
} else if (!regex.test(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should contain exactly 4 digits";
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="60%" 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>
<input type="radio" name="group1" value="GCSE">GCSE<br>
</td>
</tr>
<tr>
<td>
<input type="radio" name="group1" value="AS">AS<br>
</td>
</tr>
<tr>
<td>
<input 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>
Here is how to add radio validation to your code. (Note this is setup for name="group1" radios only, you will need a for loop to check group2, group3, etc.)
if (document.ExamEntry.group1.value=="") {
msg+="You must choose a qualification\n";
document.ExamEntry.subject.focus();
document.getElementById('radioqual').style.color="red";
result = false;
}
You notify the user of what qualification they clicked by onclick events on each radio.
The function
function qualinform(qualname) {
alert(qualname + " was selected as your qualification.");
}
Example of a radio button (The name should be put into the onclick parameters)
<input onclick="qualinform('GCSE');" type="radio" name="group1" value="GCSE">GCSE
Here is the complete 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.subject.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";
result = false;
} else if (isNaN(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should only contain digits";
result = false;
} else if (!regex.test(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should contain exactly 4 digits";
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="60%" 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>
Loop over each of the form elements named 'qualification', and when you find the checked one, grab its value and push it into your validation message like this:
var qualifications = document.getElementsByName('group1')
for (var i = 0, length = qualifications.length; i < length; i++) {
if (radios[i].checked) {
msg+='you have selected ' + radios[i].value + ' as your qualification.';
break;
}
}
Okay I have a solution for you :) Try this
Then allocate ids to your inputs as a1, a2 & a3
<script language="javascript" type="text/javascript">
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;
}
var regex = /^\d{4}$/;
if (document.ExamEntry.Examination_number.value == "") {
msg+="You must enter your examination number";
result = false;
} else if (isNaN(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should only contain digits";
result = false;
} else if (!regex.test(document.ExamEntry.Examination_number.value)) {
msg+="Examination number should contain exactly 4 digits";
result = false;
}
if(document.getElementById('a1').checked){
if (msg != "") {
alert(msg);
}
return result;
}
else{
if(document.getElementById('a2').checked){
if (msg != "") {
alert(msg);
}
return result;
}
else{
if(document.getElementById('a3').checked){
if (msg != "") {
alert(msg);
}
return result;
}
else{
msg+="Please select an option";
result = false;
if (msg != "") {
alert(msg);
}
return result;
}
}
}
}
</script>
I have worked out how to get the alert box up but it seems to skip my other validation which is checking the other feilds, ect, any ideas as too why it is skiiping it? it would really help!
I am fairly new to Javascript and HTML so could you explain it, thank you
<html>
<head>
<title>Exam entry</title>
<script language="javascript" type="text/javascript">
window.validateForm=function() {
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.Exam_Number.value == "") {
msg += "You must enter the exam Number \n";
document.ExamEntry.subject.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
if (document.ExamEntry.Exam_Number.value.length != 4) {
msg += "You must enter at least Four Numbers in the Exam Number \n";
document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
var Number = document.ExamEntry.Exam_Number.value
if (isNaN(document.ExamEntry.Exam_Number.value)) {
msg += "You must enter at least four numeric characters in the Exam Number feild \n";
document.ExamEntry.Exam_Number.focus();
document.getElementById('Exam_Number').style.color = "red";
//result = false;
}
var checked = null;
var inputs = document.getElementsByName('Exam_Type');
for (var i = 0; i < inputs.length; i++) {
if (!checked) {
checked = inputs[i];
}
}
if (checked == null) {
msg += "Anything for now /n";
} else {
return confirm('You have chosen ' + checked.value + ' is this correct?');
}
if (msg == "") {
return result;
} {
alert(msg)
return false;
}
}
</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="Exam_Number">Exam Number</td>
<td><input type="text" name="Exam_Number"<font size="1">(Maximum characters: 4)</font> </td>
</tr>
<tr>
<table><form action="">
<td><input type="radio" id="examtype" name="examtype" value="GCSE" /> : GCSE<br />
<td><input type="radio" id="examtype" name="examtype" value="A2" /> : A2<br />
<td><input type="radio" id="examtype" name="examtype" value="AS"/> : AS<br />
<td><input type="submit" name="Submit" value="Submit" onclick="return validateForm();" /></td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
and here is a jsfiddle
Change:
var inputs = document.getElementsByName('Exam_Type');
to
var inputs = document.getElementsByName('examtype');
It seems you picked the wrong name for the radio elements.
Your for loop was checking the radio buttons incorrectly.
Code:
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
}
}
Please find the working fiddle here http://jsfiddle.net/sDLV4/2/
I changed code here please check...
Please find the working fiddle here
http ://jsfiddle.net/sDLV4/3/
Using HTML5 constraint validation, much of your code can be dropped, see my revision below. In addition to the wrong radio button group name pointed out by Juergen Riemer, your code has the following issues:
Better use the HTML5 DOCTYPE declaration, see below
Instead of <script language="javascript" type="text/javascript"> just use <script>. The script element does not have a language attribute, and the type attribute has the value "text/javascript" by default.
Do not define your validation function on the window object, but rather as global function (as below), or preferably as a member of a namespace object.
Instead of setting the form's name attribute to "ExamEntry", rather set its id attribute and reference the form of a variable like var examForm = document.forms["ExamEntry"];
Your HTML code is not well-formed, because in your form's table, on line 79, you start another table element with another form element, both of which do not have an end tag.
Also, it's preferable to us CSS for the form layout, instead of a table.
In my revision below I'm using a Pure CSS stylesheet for styling forms, and corresponding class values in certain elements.
For more about constraint validation in general and the HTML5 constraint validation features, see this tutorial.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta charset="UTF-8" />
<title>Exam entry</title>
<link rel="stylesheet" href="http://yui.yahooapis.com/combo?pure/0.3.0/base-min.css&pure/0.3.0/forms-min.css" />
<script>
function validateForm() {
var result = true;
var msg = "";
var checked = null;
var examForm = document.forms['ExamEntry'];
var inputs = examForm.examtype;
for (var i = 0; i < inputs.length; i++) {
if (!checked) {
checked = inputs[i];
}
}
if (!checked) {
msg += "Anything for now /n";
} else {
return confirm('You have chosen ' + checked.value + ' is this correct?');
}
if (msg == "") {
return result;
} else {
alert(msg)
return false;
}
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form id="ExamEntry" class="pure-form pure-form-aligned" method="post" action="success.html">
<div class="pure-control-group">
<label for="exNo">Exam Number:</label>
<input id="exNo" name="Exam_Number" required="required" pattern="\d{4}" title="You must enter a 4-digit exam number" />
</div>
<div class="pure-control-group">
<label>Exam type:</label>
<label class="pure-radio"><input type="radio" name="examtype" value="GCSE" /> GCSE</label>
<label class="pure-radio"><input type="radio" name="examtype" value="A2" /> A2</label>
<label class="pure-radio"><input type="radio" name="examtype" value="AS" /> AS</label>
</div>
<div class="pure-controls">
<button type="submit" class="pure-button pure-button-primary" onclick="return validateForm();">Submit</button>
<button type="reset" class="pure-button">Reset</button>
</div>
</form>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 8 years ago.
Improve this question
I am trying to learn html and JavaScript and have produced a webform. All was working well until I tried to add an if statement to validate that only an input of 4 characters is to be accepted and return true to the webform. Removal of the if allows the code to work again...what is wrong with my if? what am I missing?
Any help would be gratefully received.
<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.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.examno.value=="")
{
msg+="You must enter your exam number \n";
document.ExamEntry.examno.focus();
document.getElementById('examno').style.color="red";
result = false;
}
if (document.ExamEnrty.getElementById("examno").value.length != 4)
{
msg+="The exam number must equal 4 \n";
document.Examentry.examno.focus();
document.getElementById('examno').style.color="red";
result = 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="examno">examno</td>
<td><input type="number" name="examno" /></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>
</table>
</form>
</body>
EDIT:
OK, typo has been corrected and
if (document.ExamEnrty.getElementById("examno").value.length != 4)
has been changed to
if (document.ExamEntry.examno.value.length != 4)
but code when run is now returning true to the webform when I add characters of length smaller or longer than 4 when it should return false and throw up an error
code now reads:
<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.ExamEntry.subject.focus();
document.getElementById('subject').style.color="red";
result = false;
}
if (document.ExamEntry.examno.value=="")
{
msg+="You must enter your exam number \n";
document.ExamEntry.examno.focus();
document.getElementById('examno').style.color="red";
result = false;
}
if (document.ExamEntry.examno.value.length != 4)
{
msg+="The exam number must equal 4 \n";
document.Examentry.examno.focus();
document.getElementById('examno').style.color="red";
result = 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="examno">examno</td>
<td><input type="number" name="examno" /></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>
</table>
</form>
</body>
Am I being really stupid?!! HELP
There are three issues with your if statement, and two of them are typos. First you misspelled ExamEnrty in the line:
if (document.ExamEnrty.getElementById("examno").value.length != 4)
That should be:
if (document.ExamEntry.getElementById("examno").value.length != 4)
But that's not even the answer because that will refer to the element with the ID of examno which is the table cell parent of the input you want. Instead, replace that line with:
if (document.ExamEntry.examno.value.length != 4) {
Next you have a typo in the if block on the line:
document.Examentry.examno.focus();
That should be:
document.ExamEntry.examno.focus();
Fixed jsFiddle example
Try this out: http://jsfiddle.net/chace/YEQf3/32/
function validateForm() {
var result = true;
var msg = "";
if (document.ExamEntry.name.value == "") {
msg += "You must enter your name<br />";
document.ExamEntry.name.focus();
document.getElementById('name').style.color = "red";
result = false;
} else {
document.getElementById('name').style.color = "black";
}
if (document.ExamEntry.subject.value == "") {
msg += "You must enter the subject<br />";
document.ExamEntry.subject.focus();
document.getElementById('subject').style.color = "red";
result = false;
} else {
document.getElementById('subject').style.color = "black";
}
if (document.ExamEntry.examno.value == "") {
msg += "You must enter your exam number<br />";
document.ExamEntry.examno.focus();
document.getElementById('examno').style.color = "red";
result = false;
} else {
document.getElementById('examno').style.color = "black";
}
if (document.ExamEntry.examno.value.length != 4) {
msg += "The exam number must equal 4<br />";
document.ExamEntry.examno.focus();
document.getElementById('examno').style.color = "red";
result = false;
} else {
document.getElementById('examno').style.color = "black";
}
if (msg == "") {
document.getElementById('errorMessage').innerHTML = "Success!";
return result;
} else {
document.getElementById('errorMessage').innerHTML = msg;
return result;
}
}
Also, you should set the red text back to black if it passes the test after the first try, I added that to the fiddle.
You referenced by ID instead of the name of the text field you are trying to validate.
if (document.ExamEnrty.getElementById("examno").value.length != 4)
should actually be something like
if (document.ExamEntry.examno.value.length != 4)
sorry, I didn't test the rest of the syntax but the id examno is assigned to your td not your text field