[RESOLVED] Javascript form validation (Resolved)

[Nightwalker83]

Hi,

How would you validate the contents of a "html" file using an external ".js" file?

I found this but I am new to javascript and do not know use functions like that. How do I send the request back to the html file once it has been processed?

Thank you,

Aaron

[TheBigB]

Could you post your HTML?

[Nightwalker83]

Could you post your HTML?

<div id="main">
 <form action="" name="test">
      <center> A * means it is required information.</center> 
      <center> * Name: &nbsp; 
        <input type="text" name="full_name" value="" size="20" />
      </center>
      <center> * Address: &nbsp; 
        <input name="address" type="text" id="address" value="" size="20" />
      </center>
      <center> * Suburb: &nbsp; 
        <input type="text" name="suburb" value="" size="20" />
        &nbsp;&nbsp;* Postal Code: &nbsp; 
        <input type="text" name="PostCode" value="" size="4" />
        &nbsp;&nbsp;</center>
      <center>* Email Address: &nbsp; 
        <input name="email" type="text" value="" size="25" />
      </center>
      <center>Orders: &nbsp; 
        <textarea name="orders" cols="50" rows ="4"></textarea>
      </center>
      <center> Credit card details:<br />
        <br />
        * Type:&nbsp;
        <select name="credit_card" size="1">
          <option value="please_choose" selected="selected">Please choose your card!</option>
          <option value="amex">American Express</option>
          <option value="visa">Visa</option>
          <option value="master_card">Master Card</option>
          <option value="diner's_club">Diner's Club</option>
          <option value="bank_card">Bank Card</option>
        </select>
        * Expiry date:&nbsp; 
        <select name="month">
          <option value="00" selected="selected">00</option>
          <option value="01">01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
        &nbsp;
        <select name="year">
          <option value="2007">2007</option>
          <option value="2008">2008</option>
          <option value="2009">2009</option>
          <option value="2010">2010</option>
        </select>
      </center>
      <center> 
        <input type="submit" name="" onclick="validate " value="Submit" />
        &nbsp;&nbsp;&nbsp;&nbsp; 
        <input type="reset" value="Clear Form" />
      </center>
    </form>
  </div>

[TheBigB]

Should be easy work, but don't have the time now; I'll check back in in about 8 hours.

[Nightwalker83]

Should be easy work, but don't have the time now; I'll check back in in about 8 hours.

Thank you, so much!

[MarkT]

Ok here we go. For your validation script safe this as an external javascript file. I haven't run any of this but it should be pretty close.

function ValidateInputs() {
	var sName = test.full_name.value;
	var sAddress = test.address.value;
	var sSuburb = test.suburb.value;
	var sPostCode = test.PostCode.value;
	var sEmail = test.email.value;
	var sCredit_card = test.credit_card.value;
	var sMonth = test.month.value;
	var sErr = "";
	var sInstr = "";
	
	//Check the fields
	if (sName == "") {
		sErr = "You must enter a full name\n";
	}

	if (sAddress  == "") {
		sErr = sErr + "You must enter an address\n";
	}

	if (sSuburb == "") {
		sErr = sErr + "You must enter a Suburb\n";
	}

	if (sPostCode == "") {
		sErr = sErr + "You must enter a Postal Code\n";
	}

	if (sEmail == "") {
		sErr = sErr + "You must enter an email address\n";
	}

	if (sCredit_card == "Please choose your card!") {
		sErr = sErr + "You must select a credit card type\n";
	}

	if (sMonth == "00") {
		sErr = sErr + "You must select a month\n";
	}


	
	if (sErr == "")	{
		return true;
	}
	else {
		sInstr = "The following errors were found with your submission."
		sInstr = sInstr + "\nPlease correct them and try again.\n\n"
		sErr = sInstr + sErr

		//inform the user of the problem
		alert(sErr);
		return false;
	}

}

This code just checks each of the fields and makes sure they don't have the default values. If it finds a default value it starts building an error message. After checking all the fields it check the error message and displays it if there is one. It then either cancels the form action if there was an error by returning false or signals everything is okay by returning true.

You then need to change your form tag to read

<form name="test" action="" method="post" onsubmit="return ValidateInputs()">

You should include the url in the action attribute where you want to redirect to.


The submit button tag has to be changed like so.

<input type="submit" name="submit" value="Submit" />

And last but not least you need to have the location of the javascript file in the head of your html file.

<!-- Set the proper path -->
<script language="JavaScript" src="FormValidation.js"></script>

[Nightwalker83]

Thanks Mark!

edit:

this is what I have in the html file now:

 <form name="test" action="../javascript/form.js" method="post" onsubmit="return ValidateInputs()">
      <center> A * means it is required information.</center> 
      <center> * Name: &nbsp; 
        <input type="text" name="full_name" value="" size="20" />
      </center>
      <center> * Address: &nbsp; 
        <input name="address" type="text" id="address" value="" size="20" />
      </center>
      <center> * Suburb: &nbsp; 
        <input type="text" name="suburb" value="" size="20" />
        &nbsp;&nbsp;* Postal Code: &nbsp; 
        <input type="text" name="PostCode" value="" size="4" />
        &nbsp;&nbsp;</center>
      <center>* Email Address: &nbsp; 
        <input name="email" type="text" value="" size="25" />
      </center>
      <center>Orders: &nbsp; 
        <textarea name="orders" cols="50" rows ="4"></textarea>
      </center>
      <center> Credit card details:<br />
        <br />
        * Type:&nbsp;
        <select name="credit_card" size="1">
          <option value="please_choose" selected="selected">Please choose your card!</option>
          <option value="amex">American Express</option>
          <option value="visa">Visa</option>
          <option value="master_card">Master Card</option>
          <option value="diner's_club">Diner's Club</option>
          <option value="bank_card">Bank Card</option>
        </select>
        * Expiry date:&nbsp; 
        <select name="month">
          <option value="00" selected="selected">00</option>
          <option value="01">01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
        &nbsp;
        <select name="year">
          <option value="2007">2007</option>
          <option value="2008">2008</option>
          <option value="2009">2009</option>
          <option value="2010">2010</option>
        </select>
      </center>
      <center> 
        <input type="submit" name="submit" value="Submit" />
        &nbsp;&nbsp;&nbsp;&nbsp; 
        <input type="reset" value="Clear Form" />
      </center>
    </form>

However, when I click the submit button regardless of whether there is info in the fields I get this (see attachment)!

[TheBigB]

remove the onsubmit part and make the submit button a regular button like:

<input type="button" name="submit" value="Submit" onclick="javascript: ValidateInputs();" />

and you then need to add a line to the js file at the end of the function

test.submit();

[Nightwalker83]

Thank you TheBigB!

[MarkT]

However, when I click the submit button regardless of whether there is info in the fields I get this (see attachment)!

That is because the action of your form was pointing the JS. The attached shows how it should have all been stringed together with the code I provided.

[Nightwalker83]

Oh ok, thanks!

[Nightwalker83]

@ MarkT

I followed your code! However, for some reason when I try to test my form in fire fox it won't run the script!

My html code:

<form name="test" action="http://www.dell.com" method="post" onsubmit="return ValidateInputs()">
      <center> A * means it is required information.</center> 
      <center> * Name: &nbsp; 
        <input type="text" name="full_name" value="" size="20" />
      </center>
      <center> * Address: &nbsp; 
        <input name="address" type="text" id="address" value="" size="20" />
      </center>
      <center> * Suburb: &nbsp; 
        <input type="text" name="suburb" value="" size="20" />
        &nbsp;&nbsp;* Postal Code: &nbsp; 
        <input type="text" name="post_code" value="" size="4" />
        &nbsp;&nbsp;</center>
      <center>* Email Address: &nbsp; 
        <input name="email" type="text" value="" size="25" />
      </center>
      <center>Orders: &nbsp; 
        <textarea name="orders" cols="50" rows ="4"></textarea>
      </center>
      <center> Credit card details:<br />
        <br />
        * Type:&nbsp;
        <select name="credit_card" size="1">
          <option value="please_choose" selected="selected">Please choose your card!</option>
          <option value="amex">American Express</option>
          <option value="visa">Visa</option>
          <option value="master_card">Master Card</option>
          <option value="diner's_club">Diner's Club</option>
          <option value="bank_card">Bank Card</option>
        </select>
        * Expiry date:&nbsp; 
        <select name="month">
          <option value="00" selected="selected">00</option>
          <option value="01">01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
        &nbsp;
        <select name="year">
          <option value="2007">2007</option>
          <option value="2008">2008</option>
          <option value="2009">2009</option>
          <option value="2010">2010</option>
        </select>
      </center>
      <center> 
      <input type="submit" name="submit" value="Submit" />
        &nbsp;&nbsp;&nbsp;&nbsp; 
        <input type="reset" value="Clear Form" />
      </center>
    </form>

JS Code:

function ValidateInputs() {
	var sName = test.full_name.value;
	var sAddress = test.address.value;
	var sSuburb = test.suburb.value;
	var sPostCode = test.post_code.value;
	var sEmail = test.email.value;
	var sCredit_card = test.credit_card.value;
	var sMonth = test.month.value;
	var sErr = "";
	var sInstr = "";
	
	//Check the fields
	if (sName == "") {
		sErr = "You must enter a full name\n";
	}

	if (sAddress  == "") {
		sErr = sErr + "You must enter an address\n";
	}

	if (sSuburb == "") {
		sErr = sErr + "You must enter a Suburb\n";
	}

	if (sPostCode == "") {
		sErr = sErr + "You must enter a Postal Code\n";
	}

	if (sEmail == "") {
		sErr = sErr + "You must enter an email address\n";
	}

	if (sCredit_card == "please_choose") {
		sErr = sErr + "You must select a credit card type\n";
	}

	if (sMonth == "00") {
		sErr = sErr + "You must select a month\n";
	}


	
	if (sErr == "")	{
		return true;
	}
	else {
		sInstr = "The following errors were found with your submission."
		sInstr = sInstr + "\nPlease correct them and try again.\n\n"
		sErr = sInstr + sErr

		//inform the user of the problem
		alert(sErr);
		return false;
	}

}

[MarkT]

If you are using the html you posted then it wont run. You don't have a well formatted document. The document only contains a form. Your html doesn't contain the html, head and and body tags. It also doesn't link to the JS file. If you just run the page as is from the attachment it should work fine. Here is the complete html that you need. It contains all the elements required to work.

<html>
<head><title></title>
	<script language="JavaScript" src="FormValidation.js"></script>
</head>
<body> 
	<form name="test" action="http://www.dell.com" method="post" onsubmit="return ValidateInputs()">
		<center> A * means it is required information.</center> 
		<center> * Name: &nbsp; 
			<input type="text" name="full_name" value="" size="20" />
		</center>
		<center> * Address: &nbsp; 
			<input name="address" type="text" id="address" value="" size="20" />
		</center>
		<center> * Suburb: &nbsp; 
			<input type="text" name="suburb" value="" size="20" />
			&nbsp;&nbsp;* Postal Code: &nbsp; 
			<input type="text" name="PostCode" value="" size="4" />
			&nbsp;&nbsp;</center>
		<center>* Email Address: &nbsp; 
			<input name="email" type="text" value="" size="25" />
		</center>
		<center>Orders: &nbsp; 
			<textarea name="orders" cols="50" rows ="4"></textarea>
		</center>
		<center> Credit card details:<br />
			<br />
			* Type:&nbsp;
			<select name="credit_card" size="1">
				<option value="please_choose" selected="selected">Please choose your card!</option>
				<option value="amex">American Express</option>
				<option value="visa">Visa</option>
				<option value="master_card">Master Card</option>
				<option value="diner's_club">Diner's Club</option>
				<option value="bank_card">Bank Card</option>
			</select>
			* Expiry date:&nbsp; 
			<select name="month">
				<option value="00" selected="selected">00</option>
				<option value="01">01</option>
				<option value="02">02</option>
				<option value="03">03</option>
				<option value="04">04</option>
				<option value="05">05</option>
				<option value="06">06</option>
				<option value="07">07</option>
				<option value="08">08</option>
				<option value="09">09</option>
				<option value="10">10</option>
				<option value="11">11</option>
				<option value="12">12</option>
			</select>
			&nbsp;
			<select name="year">
				<option value="2007">2007</option>
				<option value="2008">2008</option>
				<option value="2009">2009</option>
				<option value="2010">2010</option>
			</select>
		</center>
		<center> 
			<input type="submit" name="submit" value="Submit" />
			&nbsp;&nbsp;&nbsp;&nbsp; 
			<input type="reset" value="Clear Form" />
		</center>
	</form>
</body>
</html>

[Nightwalker83]

@ MarkT

Yeah, I know it won't run will the form code I posted! I just posted the form code by its self to make it easier to figure out where the error was. I can't get this code to work in Fire Fox!

Here's the full html code I'm using:

<!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" xml:lang="en" lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <meta name="author" content="Arachnoid Web Services" />
  <meta name="description" content="Joe's online Fruit and Vegetable shop" />
  <meta name="keywords" content="Fruit, Vegetables, Veg" />
  <title>Joe's Fruit Shop - Order Form</title>
<link rel="stylesheet" type="text/css" href="../css/joe's style.css" />
<!-- Set the proper path -->
<script language="JavaScript" src="../javascript/form.js"></script>
</head>
<body>
<div id="container">
<div id="banner">
<center><img src="../images/joes_header.jpg" width="482" height="42" align="middle" alt="Joe's Fruit Shop" /><br /></center></div>
<div id="navigation">
	  <br /><center><img src="../images/berry01_red.gif" width="22" height="20" align="middle" alt="A Red Berry" /></center>
      <br /><center><a href="../html/home.html" title = "Joe's Home">Home</a></center>
      <br /><center><img src="../images/berry01_red.gif" width="22" height="20" alt="A Red Berry" /></center>
      <br /><center><a href="../html/produce.html" title = "Joe's Produce">Produce</a></center>
      <br /><center><img src="../images/berry01_red.gif" width="22" height="20" alt="A Red Berry" /></center>
      <br /><center><a href="../html/history.html" title = "Joe's History">History</a></center>
      <br /><center><img src="../images/berry01_red.gif" width="22" height="20" alt="A Red Berry" /></center>
      <br /><center><a href="../html/contact_us.html" target="_blank" title = "Contact Joe's">Contact Us</a></center>
 </div>
<div id="main">
<h2>Joe's Fruit Shop Order Form</h2>
<form name="test" action="http://www.dell.com" method="post" onsubmit="return ValidateInputs()">
      <center> A * means it is required information.</center> 
      <center> * Name: &nbsp; 
        <input type="text" name="full_name" value="" size="20" />
      </center>
      <center> * Address: &nbsp; 
        <input name="address" type="text" id="address" value="" size="20" />
      </center>
      <center> * Suburb: &nbsp; 
        <input type="text" name="suburb" value="" size="20" />
        &nbsp;&nbsp;* Postal Code: &nbsp; 
        <input type="text" name="post_code" value="" size="4" />
        &nbsp;&nbsp;</center>
      <center>* Email Address: &nbsp; 
        <input name="email" type="text" value="" size="25" />
      </center>
      <center>Orders: &nbsp; 
        <textarea name="orders" cols="50" rows ="4"></textarea>
      </center>
      <center> Credit card details:<br />
        <br />
        * Type:&nbsp;
        <select name="credit_card" size="1">
          <option value="please_choose" selected="selected">Please choose your card!</option>
          <option value="amex">American Express</option>
          <option value="visa">Visa</option>
          <option value="master_card">Master Card</option>
          <option value="diner's_club">Diner's Club</option>
          <option value="bank_card">Bank Card</option>
        </select>
        * Expiry date:&nbsp; 
        <select name="month">
          <option value="00" selected="selected">00</option>
          <option value="01">01</option>
          <option value="02">02</option>
          <option value="03">03</option>
          <option value="04">04</option>
          <option value="05">05</option>
          <option value="06">06</option>
          <option value="07">07</option>
          <option value="08">08</option>
          <option value="09">09</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
        </select>
        &nbsp;
        <select name="year">
          <option value="2007">2007</option>
          <option value="2008">2008</option>
          <option value="2009">2009</option>
          <option value="2010">2010</option>
        </select>
      </center>
      <center> 
      <input type="submit" name="submit" value="Submit" />
        &nbsp;&nbsp;&nbsp;&nbsp; 
        <input type="reset" value="Clear Form" />
      </center>
    </form>
  </div>
  <div style = "text-align:center; font-size: 10pt"> <a href="Copyright.html" target="_blank" title="Joe's Copyright">Copyright</a>&nbsp;|&nbsp;<a href="Privacy.html" target="_blank" title = "Joe's Privacy">Privacy</a>&nbsp;|&nbsp; 
    <a href="mailto:[email protected]?subject=Joe's Website Query" target="_blank" title="Contact Web Administrator">Web 
    Administrator</a>&nbsp;|</div>      
</div>
</body>
</html>

I have uploaded the code in a zip file!

You just need to modify the javascript path.

[MarkT]

I don't use firefox much so I didn't know this. In the js I was referencing the form fields by FormName.FieldName.Value. This works fine in IE but for some reason FF wasn't detecting the form name as a valid object. To fix this I changed the js function to pass in a form and then used that to pull the form fields. The change to the js is

function ValidateInputs(objForm) {
	var sName = objForm.full_name.value;
	var sAddress = objForm.address.value;
	var sSuburb = objForm.suburb.value;
	var sPostCode = objForm.post_code.value;
	var sEmail = objForm.email.value;
	var sCredit_card = objForm.credit_card.value;
	var sMonth = objForm.month.value;
	var sErr = "";
	var sInstr = "";

The html then needed to be changed so it was passing the form. The chages to the html are

<form name="test" action="http://www.dell.com" method="post" onSubmit="return ValidateInputs(this);">

attached is what works for me

[Nightwalker83]

Thanks again, Mark! That code worked.

[Musician]

Doesen't anbody use document.getElementById("myelementid") anymore. Guaranteed to work in most browsers.

var sName = document.getElementById("full_name").value;

[TheBigB]

Yeah, it's used for newer browsers.
As a professional web developer, you need to make your webpage compatible to new, but also old browsers.
You need to make it browser specific.

The thing is that there are more people using older Windows versions and browsers than you think.

[Nightwalker83]

@ Musician and The Big B

The code that MarkT posted works in all the browsers I have tested it on, Opera, Internet Explorer 7.0 and Fire Fox!

Edit:

What is the Type I need to put in:

<script language="JavaScript" src="../javascript/form.js" type=""></script>?

I tried:

type = "java script" but it made my form stop working!

[MarkT]

you could try
type="text/javascript"

[Musician]

My point is that in a standards compliant world some of the methods used here are outdated in a similar way to using a font tag for example.
The aim is to use proper dom based methods for accessing elements and if these fail then if you wish to support very old browsers you can fall back on older methods.

See Javascript Best Practices

[Nightwalker83]

you could try
type="text/javascript"

That worked! Thanks!