I'm having trouble validating my form. When the form is submitted i have onsubmit="return validateInput();". If the user Enters no data the function validateInput() works correctly, changing the HTML and displaying the messages I want. But I am also trying to call function goodNum() and function checkCreditCard().
function goodNum() is ment to check that the phone number a user entered is correct, not just random numbers.
function checkCreditCard() serves the same purpose goodNum() but for a credit card.
The problem is that as long as the user enters any data into all the fields in the form it will submit. I am new to javascript and haven spent hours trying to work this out and am still clueless, any help would be greatly appreciated.
JAVASCRIPT
`
var validation = false;
function validateInput()
{
var valid = new Boolean(true);
if(validation == false)
{
alert("Please choose the Pizza size to order");
valid = false;
}
if(document.getElementById('customer_name').value == "")
{
alert("You must enter your name");
document.getElementById('customer_name').style.background='red';
valid = false;
}
if( document.getElementById('email').value == "")
{
alert("Please enter your E-mail");
document.getElementById('email').style.background='red';
valid = false;
}
if( document.getElementById('mobile_num').value == "")
{
alert("Please enter your phone number");
document.getElementById('mobile_num').style.background='red';
valid = false;
}
else if(!goodNum()){
alert("The number you entered is incorrect");
document.getElementById('mobile_num').style.background='red';
valid = false;
}
if( document.getElementById('credit_card').value == "")
{
alert("Please enter your credit card number");
document.getElementById('credit_card').style.background='red';
valid = false;
}
else if(!checkCreditCard())
{
alert("The credit card number you entered is incorrect");
document.getElementById('credit_card').style.background='red';
valid = false;
}
if( document.getElementById('customer_address').value == "")
{
alert("Please enter your Address");
document.getElementById('customer_address').style.background='red';
valid = false;
}
return valid;
}
//checks the phone number the user entered
function goodNum()
{
var num;
num = document.forms["myForm"]["mobileNum"].value;
var valid = new Boolean(true);
if((num==null) || (num==" "))
{
valid= false;
}
if(num.length != 10)
{
valid = false;
}
var a = num.slice(2,3);
if (!((a=="3") || (a=="5") || (a=="6") || (a=="7")))
{
valid=false;
}
for(index=3;index<10;index++)
{
a = num.slice(index,index+1);
if((a< "0") || (a> "9"))
valid =false;
}
var count = 0;
for (n=0;n<9;n++)
{
a = num.slice(n,n+1);
if((c == "0") || (c == "2") || (c == "4") || (c == "6") || (c == "8"))
count = count+1;
}
var b = parseInt(mobilenum.slice(9,10), 10);
if (!(b == count))
{
valid=false;
}
if(!valid)
{
alert("Re-enter your number.");
}
return valid;
}
//checking to make sure the user entered a correct credit card number
//using the luhn formula
function checkCreditCard()
{
var valid = new Boolean(true);
var cardNum;
cardNum = document.forms["myForm"]["creditCard"].value;
var cNum = 0, checkNumber=0;
if (cardNum.length != 16)
{
valid=false;
}
for(var x = cardNum.length - 1; x >= 0; x--)
{
checkNumber = cardNum.charAt(x);
checkNumber = parseInt(checkNumber, 10);
if((x%2) == 0)
{
checkNumber = checkNumber*2;
if(checkNumber > 9)
{
checkNumber = checkNumber -9;
}
}
cNum += checkNumber;
}
if(!(cNum%10)==0)
{
valid = false;
}
return valid;
}
HTML
<form name="myForm" onsubmit="return validateInput();" id="customer_details" method="get" action="http://atlantis.cit.ie/displayvalues.php">
<fieldset>
<legend>Choose Your Pizza: </legend>
<table>
<tr>
<td colspan="3">
<img src="base.png" id="base" width="150" height="150" alt="base" />
<img src="anchovies.png" id="anchovies" width="150" height="150" alt="anchovies" />
<img src="cheese.png" id="cheese" width="150" height="150" alt="cheese" />
<img src="onions.png" id="onions" width="150" height="150" alt="Pizza" />
<img src="p4.png" id="pizh" width="150" height="150" alt="Pizza" />
<img src="pepperoni.png" id="pepperoni"width="150" height="150" alt="Pepperoni" />
<img src="olives.png" id="olives" width="150" height="150" alt="olives" />
</td>
</tr>
<tr>
<td><input type="radio" id="radio1" onclick="resize();validation=true;" name="pbase" value="small" /> Small</td>
<td><input type="radio" id="radio2" onclick="resize();validation=true;" name="pbase" value="medium" /> Medium</td>
<td><input type="radio" id="radio3" onclick="resize();validation=true;" name="pbase" value="large" /> Large</td>
</tr>
<tr>
<td colspan="2">Anchovies</td>
<td><input type="checkbox" id="Anchovies" name="anch" onclick="doVisible()" value="0.50" /></td>
</tr>
<tr>
<td colspan="2">Cheese</td>
<td><input type="checkbox" id="Cheese" name="ch" onclick="doVisible()" value="0.50" /></td>
</tr>
<tr>
<td colspan="2">Onions</td>
<td><input type="checkbox" id="Onions" name="oni" onclick="doVisible()" value="0.50" /></td>
</tr>
<tr>
<td colspan="2">Pepper</td>
<td><input type="checkbox" id="pepper" name="pe" onclick="doVisible()" value="0.50" /></td>
</tr>
<tr>
<td colspan="2">Pepperoni</td>
<td><input type="checkbox" id="Pepperoni" name="pep" onclick="doVisible()" value="0.50" /></td>
</tr>
<tr>
<td colspan="2">Olives</td>
<td><input type="checkbox" id="Olive" name="ol" onclick="doVisible()" value="0.50" /></td>
</tr>
<tr>
<td colspan="2">Name:*</td>
<td><input type="text" id="customer_name" name="customerName" size="35" placeholder="John Doe" /></td>
</tr>
<tr>
<td colspan="2">Email Address:*</td>
<td><input type="text" id="email" name="emailAdd" size="35" placeholder="example#mycit.ie"/></td>
</tr>
<tr>
<td colspan="2"> Phone Number:*</td>
<td><input type="text" id="mobile_num" name="mobileNum" size="35" placeholder="0851111111" /></td>
</tr>
<tr>
<td colspan="2">Credit Card Number:*</td>
<td><input type="text" id="credit_card" name="creditCard" size="35" /></td>
</tr>
<tr>
<td colspan="2">Address:*</td>
<td><textarea id="customer_address" name="address" rows="5" cols="27"></textarea></td>
</tr>
<tr>
<td colspan="3"><input value="Order Now" onclick="" type="submit" /><input value="Reset Order" onclick="" type="Reset" /></td>
</tr>
</table>
</fieldset>
</form>
`
(that isn't all the code, i have other functions that work so I don't think they are causing the problem, also, sorry for so much code)
You have two problems in the following code:
var count = 0;
for (n=0;n<9;n++)
{
a = num.slice(n,n+1);
if((c == "0") || (c == "2") || (c == "4") || (c == "6") || (c == "8"))
count = count+1;
}
var b = parseInt(mobilenum.slice(9,10), 10);
ashould be c
mobilenum is not defined
When these two problems are corrected, your message "Re-enter your number" is displayed.
I have a suggestion as well. Since you are a beginner and this code is probably critical to the business you are working for, you should consider using a validation library. You can find a review at: https://www.codefellows.org/blog/the-ten-best-javascript-libraries-for-form-validation-and-formatting
Related
Here is my Form. I need validation in JavaScript.
At least one checkbox selected in validation.
I hop you all are understand what I need.
please give me solution for that.
If any query then feel free ask.
<form action="#" method="post" name="studentregistration" onsubmit="return(validate());">
<table cellpadding="3" width="100%" align="center" cellspacing="3">
<tr>
<td>Hobby</td>
<td>
<input type="checkbox" name="hobby" value="Chess" id="hobby">Chess
<input type="checkbox" name="hobby" value="Music" id="hobby">Music<br>
<input type="checkbox" name="hobby" value="Cricket" id="hobby">Cricket
<input type="checkbox" name="hobby" value="Reading" id="hobby">Reading
</td>
</tr>
<tr>
<td>
<input type="submit" name="Submit Form" value="Submit Form" id="submitform">
</td>
</tr>
</table>
</form>
If you're trying to validate that at least one checkbox is checked, then this should work for you using jQuery:
$('input[type="checkbox"]:checked').length > 0
In "pure" js, you could remove the onsubmit attribute and do this instead:
document.querySelector('form[name="studentregistration"]').onsubmit = function(e) {
e.preventDefault();
var cbx = document.querySelectorAll('form[name="studentregistration"] input[name="hobby"]:checked');
if(cbx.length > 0) {
// at least one checked - do something
}
else {
// none checked
}
}
See a live demo!
Complete solution.
In order to submit the form after validation you must use:
document.getElementById("myForm").submit();
document.getElementById("submitform").addEventListener("click",submit_form);
function submit_form(e){
var ob = "";
var chess = document.getElementById("hobby1").checked;
var music = document.getElementById("hobby2").checked;
var cricket = document.getElementById("hobby3").checked;
var reading = document.getElementById("hobby4").checked;
if(chess == true){
ob += "hobby: chess selected!\n";
}
if(music == true){
ob += "hobby: music selected!\n";
}
if(cricket == true){
ob += "hobby: cricket selected!\n";
}
if(reading == true){
ob += "hobby: reading selected!\n";
}
if(ob==""){
alert("No hobbys selected");
}
else{
alert(ob);
//document.getElementById("myForm").submit();
}
//for testing purposes
e.preventDefault();
return false;
}
<form id = "myForm" action="#" method="post" name="studentregistration">
<table cellpadding="3" width="100%" align="center" cellspacing="3">
<tr>
<td>Hobby</td>
<td>
<input type="checkbox" name="hobby" id="hobby1">Chess
<input type="checkbox" name="hobby" id="hobby2">Music<br>
<input type="checkbox" name="hobby" id="hobby3">Cricket
<input type="checkbox" name="hobby" id="hobby4">Reading
</td>
</tr>
<tr>
<td>
<input type="button" name="Submit Form" value="Submit Form" id="submitform">
</td>
</tr>
</table>
</form>
if($("#hobby").is(':checked')){
alert("checkbox checked");
}
else{
alert("Please select at least one checkbox");
}
Here is another easy answer
var test = document.getElementsByName("hobby[]");
if(test[0].checked==false && test[1].checked==false && test[2].checked==false && test[3].checked==false)
{
alert("Please Check");
return false;
}
I have the following validation code for a simple form. I am able to perform basic validation but the form still gets posted even if the data is wrong and an alert is generated. How can I stop that from happening?
JS CODE
function validate(){
validateForm();
}
function validateForm() {
var x = document.forms["myForm"]["fname"].value;
var y = document.forms["myForm"]["pname"].value;
var email = document.forms["myForm"]["email"].value;
var phone = document.forms["myForm"]["phone"].value;
var date = document.forms["myForm"]["date"].value;
var month = document.forms["myForm"]["month"].value;
var year = document.forms["myForm"]["year"].value;
window.load = function() {
var myForm = document.getElementById('myForm');
myForm.onsubmit = function(e) {
return validateForm(); // will be false if the form is invalid
}
}
if (x == null || x == "") {
alert("Name must be filled out");
return false;}
else if (y == null || y == "") {
alert("Address must be filled out");
return false;
}
else if(email == '' || email.indexOf('#') == -1 || email.indexOf('.') == -1)
{
alert("Insert Valid Email Address");
return false;
}
else if(phone == ''|| phone <1000000000 || phone >9999999999){
alert("Enter valid phone number");
return false;
}else if(date =='' || date<01 || date >31){
alert("Enter valid date ");
return false;
}else if(month =='' || month<1 || month >12){
alert("Enter valid month ");
return false;
}else if(year =='' || year<1800 || year >2015){
alert("Enter valid year ");
return false;
}
}
Form
<form name="myForm" action="http://www.randyconnolly.com/tests/process.php" onsubmit="return validate()" method="post">
<table width="30%" border="0" align="center" cellpadding="10" cellspacing="20">
<tr>
<td width="20%"> <span style="font-size: 22px">Name:</span><br>
<br /></td>
<td width="80%"><input type="text" name="fname" required /></td>
</tr>
<tr>
<td><span style="font-size: 22px">Picture Name: <br>
<br></span></td>
<td><input type="text" name="pname" required /></td>
</tr>
<tr>
<td><span style="font-size: 22px">Email:</span> <br>
<br></td>
<td><input type="text" name="email" required /></td>
</tr>
<tr>
<td><span style="font-size: 22px">Phone:</span> <br>
<br></td>
<td><input type="number" name="phone" required /></td>
</tr>
<tr>
<td><span style="font-size: 22px">Date(mm/dd/yyyy):</span></td>
<td><input type="text" name="month" size="2" required />
/
<input type="text" name="date" size="2" required />
/
<input type="text" name="year" size="4" required /></td>
</tr>
<tr>
<td><span style="font-size: 22px">Artwork</span></td>
<td><input type="file" accept="image/gif" name="pic" ></td>
</tr>
</table>
<br><br>
<input class="button-0" type="submit" value="Submit" />
<br>
</form>
You have several issues with your code.
Your validation function needs to return false to prevent the form submission.
You are registering the window.onload handler inside of the validateForm function. Since, the the time the validateForm function is called, the form is already being submitted.
The handler in your markup is validate. Your validate method doesn't return anything so submission won't be prevented by that either.
The easiest way to fix everything would to be to remove the window.onload handler from your code altogether. You could then change validate to:
function validate() {
return validateForm();
}
And submission should be prevented properly.
I got it working. Instead of calling validate() and in that calling validateForm() I directly called validateForm() at the onsubmit. Thanks for the help.
I have been working on this for a week now and cannot figure out for the life of me what I have missed or if I have put something somewhere that it is not supposed to be. the code was working fine until I began making changes to the confirmSubmit() function and now it seems like nothing is working properly other than displaying the page. I had my teacher look at it too and he said that he couldn't find out either. I just don't know anymore maybe one of you all can help me solve this.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="AS400.css" type="text/css" />
<title>Registration</title>
<script type="text/javascript">
/* <![CDATA[ */
// This JavaScript removes default values form field
function doClear(theText) {
if (theText.value == theText.defaultValue) {
theText.value = ""
}
}
// This JavaScript allows characters except numbers
function AcceptLetters(objtextbox)
{
var exp = /[^\D]/g;
objtextbox.value = objtextbox.value.replace(exp,'');
}
// This JavaScript allows numbers only
function AcceptDigits(objtextbox)
{
var exp = /[^\d]/g;
objtextbox.value = objtextbox.value.replace(exp,'');
}
//This JavaScript confirms everything is filled out
function confirmSubmit()
{
var submitForm = window.confirm("Are you sure you want to submit the form?");
var Special offers = false;
var offers = false;
if (document.forms[0].name.value=="Name" || document.forms[0].name.value == "") {
window.alert("Please input your name.");
return false;}
if (document.forms[0].email.value == "E-Mail Address" || document.forms[0].email.value == "") {
window.alert("Please input your email.");
return false;}
if (document.forms[0].password1.value == "" || document.forms[0].password2.value == "") {
window.alert("Please input your password twice.");
retrun false;}
if (document.forms[0].SQ.value == "" || document.forms[0].SQ.value == "none") {
window.alert("Please choose a security question.");
return false;}
if (document.forms[0].sq_answer.value == "Question Answer"|| document.forms[0].sq_answer.value == "") {
window.alert("Please input a sequrity question answer.");
return false;}
for (var i = 0; i <= 1; ++i) {
if (document.forms[0].SpecialOffers[i].checked == true) {
Special offers = true;
break;}
}
if (Special offers == false) {
window.alert("You must select yes or no to special offers.");
return false;
}
for (var k = 0; k <= 3; k++) {
if (document.forms[0].Offers[k].checked == true) {
offers = true;
break;}
}
if (offers == false) {
window.alert("You must choose one offer.");
return false;}
else
return true;
}
/* ]] */
</script>
</head>
<body>
<form action="FormProcessor.html" method = "get" enctype = "application/x-www-form-urlencoded" onsubmit="return confirmSubmit()">
<table width="50%">
<tr><th colspan="2"><h1>Registration Page</h1></th></tr>
<tr><th colspan="2"><h2>Personal Information<h2></th></tr>
<tr><th colspan="2">(Fields with asterisks are mandatory)</th></tr>
<tr><td>* Name: </td>
<td><input type="text" name="name" value="Name" maxlength="20" onFocus="doClear(this)" onkeyup="AcceptLetters(this)" /></td></tr>
<tr><td>* E-Mail:</td>
<td><input type="text" name="email" value="E-mail Address" onFocus="doClear(this)" /> </td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><th colspan="2"><h3>Security Information</h3></th></tr>
<tr><td>* Password:</td><td><input type="password" name="password1" /></td></tr>
<tr><td>* Confirm Password:</td><td><input type="password" name="password2" /></td></tr>
<tr><td>* Security Question:</td>
<td><select id="selection" name="SQ">
<option value="none">Please Choose One</option>
<option value="color">What is your favorite color?</option>
<option value="name">What is your Mother's maiden name?</option>
<option value="pet">What is your pets name?</option>
<option value="school">What high school did you graduate from?</option>
</select></td></tr>
<tr><td>Answer:</td><td><input type="text" name="sq_answer" value="Question Answer" onFocus="doClear(this)" /></td></tr>
<tr><td></td></tr>
<tr><td></td></tr>
<tr><th colspan="2"><h4>* Preferences</h4></th></tr>
<tr><th colspan="2">Would you like any special offers sent to your E-mail address?</th></tr>
<tr><th colspan="2">Yes<input type="radio" name="SpecialOffers" value="Yes"/>No<input type="radio" name="SpecialOffers" value="No" /></th></tr>
<tr><th colspan="2"><h5>Interests</h5></th></tr>
<tr><th colspan="2"><input type="checkbox" name="Offers" value="check"/>Entertainment</th></tr>
<tr><th colspan="2"><input type="checkbox" name="Offers" value="check"/>Shopping</th></tr>
<tr><th colspan="2"><input type="checkbox" name="Offers" value="check"/>Business</th></tr>
<tr><th colspan="2"><input type="checkbox" name="Offers" value="check"/>Exercise</th></tr>
<tr><td></td></tr>
<tr><th colspan="2"><input id="submit" type="submit" value="Submit"/><input id="reset" type="reset" value="Reset"/></th></tr>
</table>
</form>
</body>
</html>
You have few syntax errors:
Special offers variable can't have spaces in it.
Keyword is not retrun its return.
I have all ready inserted the validation for the radio button and now all i need is to have a alert box to come up before the code proceeds asking "Are you sure you want to pick 'x'" when x would be the level selected. And if cancel is pressed it returns to the webpage.
Thank you are here is my code below.
<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.number.value == "") {
msg += "You must enter a exam number \n";
document.ExamEntry.number.focus();
document.getElementById('number').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.level[0].checked == false) && (document.ExamEntry.level[1].checked == false) && (document.ExamEntry.level[2].checked == false)) {
msg += "You mus select the level entered \n";
result = false;
}
}
function CheckField(obj) {
if (obj.value.length < '4') {
alert('Name field must 4 character long');
obj.focus();
}
}
</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="number">Examination Number</td>
<td><input type="text" name="number" maxlength="4" onblur="CheckField(this)"/></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<input type="radio" name="level">GCSE
<input type="radio" name="level">AS
<input type="radio" name="level">A2
<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>
Hope this helps to get along.
<!DOCTYPE html>
<html>
<head>
<title>Exam entry</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function validateForm() {
var result = true;
var msg = "";
var objx;
// test for empty inputs
objx = document.getElementById("subjectInput");
if (objx.value.length == 0) {
msg += "You must enter the subject \n";
objx.focus();
document.getElementById('subject').style.color = "red";
result = false;
}
objx = document.getElementById("numberInput");
if (objx.value.length == 0) {
msg += "You must enter a exam number \n";
objx.focus();
document.getElementById('number').style.color = "red";
result = false;
}
objx = document.getElementById("nameInput");
if (objx.value.length == 0) {
msg += "You must enter your name \n";
objx.focus();
document.getElementById('name').style.color = "red";
result = false;
}
// checked level is needed below for confirmation
var objx = document.ExamEntry;
var checkedLevel = "";
if (objx.level[0].checked) {
checkedLevel = objx.level[0].value;
}
else
if (objx.level[1].checked) {
checkedLevel = objx.level[1].value;
}
else
if (objx.level[2].checked) {
checkedLevel = objx.level[2].value;
}
if (checkedLevel.length == 0) {
msg += "You must select the level entered \n";
result = false;
}
if (result) {
// test for minimum length of name
objx = document.getElementById("nameInput");
if (objx.value.length < 4)
{
objx.focus();
document.getElementById('name').style.color = "red";
//alert('Name field must 4 character long');
msg += 'Name field must be 4 characters long'
result = false;
}
}
// confirm checked level
if (result) {
result = confirm("Are you sure you want to pick '" + checkedLevel + "' ?");
}
else {
alert(msg);
}
return result;
}
</script>
</head>
<body>
<h1>Exam Entry Form</h1>
<form name="ExamEntry" method="post" onsubmit="return validateForm();" action="success.html">
<table width="50%" border="0">
<tr>
<td id="name">Name</td>
<td><input type="text" name="name" id="nameInput" /></td>
</tr>
<tr>
<td id="number">Examination Number</td>
<td><input type="text" name="number" id="numberInput" maxlength="4" /></td>
</tr>
<tr>
<td id="subject">Subject</td>
<td><input type="text" name="subject" id="subjectInput" /></td>
</tr>
<tr>
<input type="radio" name="level" value="GCSE">GCSE
<input type="radio" name="level" value="AS">AS
<input type="radio" name="level" value="A2">A2
<tr>
<td><input type="submit" name="Submit" value="Submit" /> </td>
<td><input type="reset" name="Reset" value="Reset" /></td>
</tr>
</table>
</form>
</body>
</html>
I am currently doing a GCSE course which allows me to ask for assistance from IT sources as long as I reference them in my investigation. I wish to make the following code validate that there is a number of four digits in the Examination Number entry field. I'm okay with simple validation but this is another step for me.
<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.examnumber.value=="") {
msg+="You must enter your Examination Number \n";
document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color="red";
result = false;
}
var checked = null;
var inputs = document.getElementsByName('examtype');
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) {
checked = inputs[i];
document.getElementById('examtype').style.color="red";
}
}
if(checked==null)
{
msg+="Please choose an option";
result = false;
}
else{
confirm("You have chosen "+checked.value+" is this the correct course?");
}
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>
<td id="subject">Subject</td>
<td><input type="text" name="subject" /></td>
</tr>
<tr>
<td id="examnumber">Examination Number</td>
<td><input type="text" name="examnumber" /></td>
</tr>
<tr>
<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 />
</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>
Regarding checking if it is number, you can use some regex:
e.g.
var reg = /^\d{4}$/ig;
var regExRes = reg.exec(document.ExamEntry.examnumber.value);
if (document.ExamEntry.examnumber.value == "" || (regExRes == null || regExRes.length == 0)) {
msg += "You must enter your Examination Number \n";
document.ExamEntry.examnumber.focus();
document.getElementById('examnumber').style.color = "red";
result = false;
}
To avoid entering anything beside number, I would suggest you to use something like jquery pluging called masked input
EDIT:
line changed from var reg = /\d{4}/ig; to var reg = /^\d{4}$/ig;