We Keep Coding

Form does not take in new values

HTML
<form action="./Login.php" method="post" onsubmit="return checkInput();">
<table width="300" border="1">
<tbody>
<tr>
<th> UserName: </th>
<td><input class="box" type="text" value="" name="uname" id="uname"></td>
</tr>
<tr>
<th>Password: </td>
<td><input class="box" type="password" value="" name="pword" id="uname"></td>
</tr>
</tbody>
</table>
<input type="hidden" id="infoDis" value=""/>
<input type="submit" value="Log-in" name="login">
<input type="submit" value="Reset" name="reset">
</form>
JS
function checkInput()
{
var v1 = document.getElementsByName("uname");
var v2 = document.getElementsByName("pword");
var uname = v1[0].getAttribute("value");
var pword = v2[0].getAttribute("value");
if (uname == "" || pword == "")
{
if(uname == "" && pword != "")
{
alert("Error: Username is Empty. Please Enter Username.");
}
else if(pword == "" && uname != "")
{
alert("Error: Password is Empty. Please Enter Password");
}
else
{
alert("Error: Username And Password is Empty. Please Enter Username and Password");
}
location.reload();
return false;
}
return true;
}
Hi guys. I am new to html/js. I having a small issue where when i enter new values into the textbox. It does not being captured by the javascript. In turn, after a few debugging i found that the javascript is always taking the value in the html tag. Hence, even if value is entered in the first try or in the retry phase, the javascript takes the value in the html "" tag. Please Help Thx.

Because you are reading values using getAttribute
"getAttribute() returns the value of a specified attribute on the element"
Use Element.value to read the value property of the InputElement
Whenever value of the Element is changed, property of the Element is being updated not the attribute
function checkInput() {
var v1 = document.getElementsByName("uname");
var v2 = document.getElementsByName("pword");
var uname = v1[0].value;
var pword = v2[0].value;
if (uname == "" || pword == "") {
if (uname == "" && pword != "") {
alert("Error: Username is Empty. Please Enter Username.");
} else if (pword == "" && uname != "") {
alert("Error: Password is Empty. Please Enter Password");
} else {
alert("Error: Username And Password is Empty. Please Enter Username and Password");
}
location.reload();
return false;
}
return true;
}
<form action="./Login.php" method="post" onsubmit="return checkInput();">
<table width="300" border="1">
<tbody>
<tr>
<th>UserName:</th>
<td>
<input class="box" type="text" value="" name="uname" id="uname">
</td>
</tr>
<tr>
<th>Password:</th>
<td>
<input class="box" type="password" value="" name="pword" id="uname">
</td>
</tr>
</tbody>
</table>
<input type="hidden" id="infoDis" value="" />
<input type="submit" value="Log-in" name="login">
<input type="submit" value="Reset" name="reset">
</form>
Note: Refer .prop() vs .attr() question to gain more understanding!

jQuery to the resuce!
Some people love it, and others hate it. I wouldn't rely on it as your sole frontend library, but if you need to do simple DOM manipulation/interaction, then jQuery is usually a good solution. Grabbing the data stored from a form element is simple in jQuery.
$(document).ready(function() {
$('.button').on('click', function() {
var text = $('#some_element).val();
$('#another_element').append(text);
});
});
The API docs have easy examples. http://api.jquery.com/val/

Simply change to this:
var uname = v1[0].value;
var pword = v2[0].value;
.value returns the value of the input element

You can also get value using jquery very easily:
var uname = $("input[name=uname]").val();
var pword = $("input[name=pword]").val();

Prevent submission

I want to prevent the submission of data when user enters a number or a special character. I've used this.
//restric entering numbers and special characters
function checkLetters() {
var crop = $('#crop').val().trim();
//Entering numbers
if (crop.match(/([0-9])/)) {
$('#cropEr4').show();
boolsub = false;
}
else {
$('#cropEr4').hide();
boolsub = true;
}
//Entering special characters
if (crop.match(/([!,%,&,#,#,$,^,*,?,_,~])/)) {
$('#cropEr3').show();
boolsub = false;
}
else {
$('#cropEr3').hide();
boolsub = true;
}
}
//prevent submitting
function validateSubmit() {
var crop = $('#crop').val().trim();
if (crop !== "") {
$('#cropEr2').hide();
if (boolsub) {
boolsub = false;
return false;
}
if (boolsub) {
boolsub = true;
return true;
}
}
else {
$('#cropEr2').show();
return false;
}
}
below is the form.
<form name="myForm" action="../controller/new.php" method="POST"
enctype="multipart/form-data" onSubmit="return validateSubmit()">
<table align="left" width="300" height="200">
<tbody>
<tr>
<td>Crop Name : </td>
<td><input type="text" name="crop_id" value=""size="45" id="crop" onkeyup="checkLetters(this.value);"/>
<div id="cropEr2" style="display:none;color:red">Enter crop name</div>
<div id="cropEr3" style="display:none;color:red">You cannot enter symbols, have to enter only letters.</div>
<div id="cropEr4" style="display:none;color:red">You cannot enter numbers, have to enter only letters.</div>
</td>
</tr>
<tr>
<td align="center">
<input class="button"type="reset" value="Clear Deatils" />
</td>
<td><input type="hidden" name="action" value="add_crop" />
<input class="button" id="submit" type="submit" value="Add Details" />
</td>
</tr>
</tbody>
</table>
Can anyone tell me why this doesn't work? When I enter numbers and special characters the message is displayed, but it is submitting the form anyway.
I'm loading this code in a facebox.

What you need is to not rely on JavaScript when there are saner options available.
Compare your wall of code, to this:
<input type="text" pattern="[a-zA-Z]+" required />
Suddenly it only allows letters, and even won't submit until you type something!
Isn't HTML5 awesome?

First you test to see if the string contains any numbers. If it does, you set boolsub to false otherwise you set it to true.
Then you test to see if it contains any special characters. If it does, you set boolsub to false otherwise you set it to true.
It doesn't matter what value you set boolsub to for the number test. You always overwrite that value for the special character test.
Set boolsub to true by default. Set it to false if it fails a check. Never reset it to true if it passes a check.
function checkLetters() {
boolsub = true;
var crop = $('#crop').val().trim();
//Entering numbers
if (crop.match(/([0-9])/)) {
$('#cropEr4').show();
boolsub = false;
} else {
$('#cropEr4').hide();
}
//Entering special characters
if (crop.match(/([!,%,&,#,#,$,^,*,?,_,~])/)) {
$('#cropEr3').show();
boolsub = false;
} else {
$('#cropEr3').hide();
}
}
Note, however, that you would be better off rewriting this so that checkLetters returned a value instead of setting a global, and to use modern event binding techniques.

Done your code with preventing special characters and blank fields. just try to implement like this way...
HTML :
<form name="myForm" action="../controller/new.php" method="POST" enctype="multipart/form-data" onSubmit="return validateSubmit()">
<input type="text" name="crop_id" value=""size="45" id="crop" />
<input class="button" id="submit" type="submit" value="Add Details" />
<div id="message" style="color:red;"></div>
</form>
JS CODE:
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
//prevent submitting
function validateSubmit(){
var crop = $('#crop');
var sh = $('#message');
if(bv(crop,sh) === true && sc(crop,sh) === true){
return true;
}else{
return false;
}
}
function bv(e,sh){
var a = e.val().trim();
//Entering blank characters
if (a == ""){
sh.html('Blank not allowed.');
return false;
}else{
sh.html('');return true;
}
}
function sc(e,sh){
var b = e.val().trim();
//Entering special characters
if (b.match(/([0-9,!,%,&,#,#,$,^,*,?,_,~])/)){
sh.html('Allows only characters.');
return false;
}else{
sh.html('');return true;
}
}
</script>

What you need is " event.preventDefault()" : : If this method is called, the default action of the event will not be triggered.
And add an event for submit button.
$( "#submit" ).click(function( event ) {
var crop = $('#crop').val().trim();
if (crop !== "") {
$('#cropEr2').hide();
if (boolsub) {
boolsub = false;
event.preventDefault()
}
if (boolsub) {
boolsub = true;
return true;
}
}
else {
$('#cropEr2').show();
event.preventDefault()
}
});
You can remove this line: onSubmit="return validateSubmit()"
http://jsfiddle.net/#&togetherjs=L2vRaIkMNT

UPDATE AFTER OP's COMMENT
var boolsub = true;
function checkLetters() {
var crop = $('#crop').val().trim();
if ((crop.match(/([0-9])/)) || (crop.match(/([!,%,&,#,#,$,^,*,?,_,~])/))) {
$('#cropEr3').show();
boolsub = false;
}
else {
$('#cropEr3').hide();
boolsub = true;
}
}
//prevent submitting
function validateSubmit() {
var chek = 0;
var crop = $('#crop').val().trim();
if (crop !== "") {
$('#cropEr2').hide();
if (boolsub) {
return true;
}
else {
return false;
}
}
else {
$('#cropEr2').show();
return false;
}
}
<form id="form1" runat="server" action="abc.html">
<table align="left" width="300" height="200">
<tbody>
<tr>
<td>Crop Name : </td>
<td><input type="text" name="crop_id" value=""size="45" id="crop" onkeyup="checkLetters(this.value);"/>
<div id="cropEr2" style="display:none;color:red">Enter crop name</div>
<div id="cropEr3" style="display:none;color:red">You cannot enter symbols or numbers, have to enter only letters.</div>
</td>
</tr>
<tr>
<td align="center">
<input class="button"type="reset" value="Clear Deatils" />
</td>
<td><input type="hidden" name="action" value="add_crop" />
<input class="button" id="submit" type="submit" value="Add Details" onclick="return validateSubmit()" />
</td>
</tr>
</tbody>
</table>
</form>
UPDATED DEMO

JavaScript 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. 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>

Facebook App form won't submit

Ok so I have this email sign up form that I use on my website. I got the script directly from the email management system as they are the ones that process the form.
I'm using it on my website and it works perfectly but when I try and run the same script in a Facebook App it fails to submit. Actually that's not strictly true as it does pop up with the 'You need to agree to the terms...' if left unchecked but it doesn't get any further than that.
I've tested it in a browser and it works so I know there's nothing wrong with the code, I'm just baffled as to why it won't function in Facebook.
Here is the script exactly how it appears on the page.
<form action="http://www.elabs12.com/functions/mailing_list.html" method="post" name="UPTml807" onSubmit="return (!(UPTvalidateform(document.UPTml807)));">
<input type="hidden" name="submitaction" value="3">
<input type="hidden" name="mlid" value="807">
<input type="hidden" name="siteid" value="2012000210">
<input type="hidden" name="tagtype" value="q2">
<input type="hidden" name="demographics" value="1,2,-1,40836,37592">
<input type="hidden" name="redirection" value="http://www.MYWEBISTE.com/WebContent/Promotions/PromotionsNewEmailThanks.htm">
<input type="hidden" name="uredirection" value="http://">
<input type="hidden" name="welcome" value="">
<input type="hidden" name="double_optin" value="">
<input type="hidden" name="append" value="on">
<input type="hidden" name="update" value="on">
<input type="hidden" name="activity" value="submit">
<div class="textfield">
<table border="0" cellspacing="0" cellpadding="5" width="100%">
<tr>
<td><span class="formText">Your First Name*</span><br/><input type="text" name="val_1" class="firstName" size="10" value="" /></td>
<td><span class="formText">Your Last Name*</span><br/><input type="text" name="val_2" class="lastName" size="10" value="" /></td>
</tr>
<tr>
<td colspan="2"><span class="formText">Your Email*</span><br/><input type='text' name='email' class="email" value='' style='display:block'/></td>
</tr>
<tr>
<td colspan="2"><span class="formText">Your Mobile Number</span><br/>
<input type='text' name='val_3' class="mobile" value='' style='display:block'/></td>
</tr>
<tr>
<td><div style="text-align:left; margin:0 0 20px 0px"><input type="checkbox" id="val_37592" name="val_37592" style="width:20px; height:10px;">
<span class="formText">I accept your Privacy Policy (below)*</span><br/><br/><span style="font-size:12px !important;" class="formText">*Required field</span></div></td>
<td align="right"><input type="submit" name="submit" value="Submit" class="submitBTN" /></td>
</tr>
</table>
</div>
<script language="Javascript">
function emailCheck (emailStr) {
var emailPat=/^(.+)#(.+)$/;
var specialChars="\\(\\)<>#,;:\\\\\\\"\\.\\[\\]";
var validChars="\[^\\s" + specialChars + "\]";
var quotedUser="(\"[^\"]*\")";
var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/;
var atom=validChars + '+';
var word="(" + atom + "|" + quotedUser + ")";
var userPat=new RegExp("^" + word + "(\\." + word + ")*$");
var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$");
var matchArray=emailStr.match(emailPat);
if (matchArray==null) {
alert("Email address seems incorrect (check # and .'s)");
return false;
}
var user=matchArray[1];
var domain=matchArray[2];
if (user.match(userPat)==null) {
alert("The username doesn't seem to be valid.");
return false;
}
var IPArray=domain.match(ipDomainPat);
if (IPArray!=null) {
for (var i=1;i<=4;i++) {
if (IPArray[i]>255) {
alert("Destination IP address is invalid!");
return false;
}
}
return true;
}
var domainArray=domain.match(domainPat);
if (domainArray==null) {
alert("The domain name doesn't seem to be valid.");
return false;
}
var atomPat=new RegExp(atom,"g");
var domArr=domain.match(atomPat);
var len=domArr.length;
if ((domArr[domArr.length-1] != "info") &&
(domArr[domArr.length-1] != "name") &&
(domArr[domArr.length-1] != "arpa") &&
(domArr[domArr.length-1] != "coop") &&
(domArr[domArr.length-1] != "aero")) {
if (domArr[domArr.length-1].length<2 ||
domArr[domArr.length-1].length>3) {
alert("The address must end in a three-letter domain, or two letter country.");
return false;
}
}
if (len<2) {
var errStr="This address is missing a hostname!";
alert(errStr);
return false;
}
return true;
}
function UPTvalidateform(thisform)
{
if (document.getElementById("val_37592").checked==false){alert("Please let us know you have read and agree to the Terms and Conditions of this email alert sign up"); return(true);}
if (thisform.val_1.value==""){
alert("Please enter a value for First Name");
return(true);}if (thisform.val_2.value==""){
alert("Please enter a value for Last Name");
return(true);}
if (emailCheck(thisform.email.value))
{
if ((document.getElementById('unsubscribe')
&& document.getElementById('unsubscribe').checked) && (document.getElementById('showpopup') && document.getElementById('showpopup').value == "on")) {
alert('Thank you, now you are unsubscribed!');
}
else if(( (document.getElementById('unsubscribe')
&& !document.getElementById('unsubscribe').checked) || (!document.getElementById('unsubscribe')) ) && (document.getElementById('showpopup') && document.getElementById('showpopup').value == "on")){
alert('Thank you for signing up!');
}
return false;
}
else
{
return true;
}
}
</script>
</form>
I've tried removing the JS to see if Facebook was blocking it and I just get the same result. I've even tried submitting to a different URL but no luck.
Is there something I've missed/am I being blind? Or maybe it's a deeper issue...
Any help is much appreciated.
Thank you.

The url you submit to must be registred in the app details. Try changing the app domains in facebook developers.
Further more if you're browsing facebook in secure mode (default setting) it will block all content from non-ssl urls. so http://www.elabs12.com/functions/mailing_list.html would have to be https://www.elabs12.com/functions/mailing_list.html

HTML Web Forms - Why is my JavaScript validation wrong? [closed]

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