VirtualMV/JavaScript/Forms/Validation

From WikiEducator
Jump to: navigation, search




Overview

VmvIcon Objectives.png

By the end of this page you will be able to:

  • Understand how a check box is created

Basic validation (js5_01)

js5_01.htm

<html>
<head>
  <title>E-Mail Submit (js5_01)</title>
  <script type="text/javascript" src="js5_01.js"></script>
</head>
<body>
<form name="frmDetails">
<table>
<tr><td>Name:</td>
    <td><input name="txtName" type="text" value="" /></td></tr>
<tr><td>E-mail:</td>
    <td><input name="txtEmail" type="text" value="" /></td></tr>
<tr><td>Post Code:<br>(exactly 5 digits please)</td>
    <td><input name="txtPostCode" type="text" value="" /></td></tr>
</table>
<p><input type="button" name="Submit" value="Submit" onClick="fnCheckOK()" /></p>
<textarea name="message" rows="7" cols="40" ></textarea>
</form>
</body>
</html>

js5_01.js

function fnNameOK() {
   strName=document.frmDetails.txtName.value
   if((strName=="")||!isNaN(strName)) {return false}
   else {return true}
}   
function fnEmailOK() {
   strEmail=document.frmDetails.txtEmail.value
   if((strEmail=="")|| !isNaN(strEmail)) {
   /* alert("email"); */
   return false;}
   else {return true}
}  
function fnPostCodeOK() {
   strPostCode=document.frmDetails.txtPostCode.value
   if((strPostCode=="")|| isNaN(strPostCode) || (strPostCode.length)!=5) {return false}
   else {return true}
} 
function fnCheckOK() {
   if(fnNameOK() && fnEmailOK() && fnPostCodeOK()) {
      document.frmDetails.message.value="The following information has been submitted:"
       +"\r\r"+strName+"\r"+strEmail+"\r"+strPostCode; }
   else {alert("You have entered bad information into one or more fields");
   }
}

Note: there is an example of some debugging code in fnEmailOK (between /* and */). If you remove the comment tags, and there is an error in the email an alert box will appear. (Obviously this code is commented out or removed in the production/live version).

Example js5_01

eMail validation

js5_01a.js

function fnNumchar(strText,strChar){
  intPos = 0
  for (i=0; i<(strText.length); i++) {
     if(strText.charAt(i)==strChar) {intPos=i+1 }
   }
   return intPos;
}
function fnEmailOK() {
   strEmail=document.frmDetails.txtEmail.value
   if((strEmail=="")|| !isNaN(strEmail) || ((strEmail.length)<5) || (fnNumchar(strEmail," ")>0)
   || (fnNumchar(strEmail,"@")!=1) || (fnNumchar(strEmail,".")==0)) {return false}
   else {return true}
}

If any of the following occur the email returns false ( || = or )

  • strEmail=="" nothing is entered
  • !isNaN(strEmail) Not (NOT a (!) Null) - actually says is it null
  • Email.length)<5  : length <= 4 char
  • fnNumchar(strEmail," ")>0 : If there is a space in the string
  • fnNumchar(strEmail,"@")!=1) : If an @ is in the first position
  • fnNumchar(strEmail,".")==0 : If a . is not in the string

Note you could rewrite the function using the IndexOf() function

Validation using a common function (js5_FormVal_TxtNotEmpty.html)

A little more sophisticated, this code uses a form containing first and last name, checks to see if any data has been entered. If either field is blank it will change the background colour and produce a message on the form using getElementById.

<html>
<head>
  <title>Form validation text not empty</title>
  <script type="text/javascript">
function fnNameOK(strName) {
  if((strName.value=="")||!isNaN(strName.value)) {
    strName.style.background = "#FBEC5D";
    return false}
  else {return true}
}  	
function fnCheckOK() {
  strMsg = ""
  objForm = document.frmDetails; //makes it easier to specify objects on the form
  objForm.txtFName.style.background = "#FFFFFF";
  if(!fnNameOK(objForm.txtFName)) { strMsg +=": first name "; }
  objForm.txtLName.style.background = "#FFFFFF";
  if(!fnNameOK(objForm.txtLName)) { strMsg +=": last name "; }
  if(strMsg.length == 0) {
    document.getElementById('Msg').innerHTML = "No errors"; }
  else { 
    document.getElementById('Msg').innerHTML = "Errors in " + strMsg; }  
}
</script>
</head>
<body>
<form name="frmDetails">
<p>Check that data has been entered into both fields</p>
<p>FirstName:<input name="txtFName" type="text" value="" />
LastName: <input name="txtLName" type="text" value="" /></p>
<p><input type="button" name="Submit" value="Submit" onClick="fnCheckOK()" /></p>
<div id="Msg"></div>
</form>
</body>
</html>

Example :Click here to run js5_FormVal_TxtNotEmpty.html.

Date validation

Dates can be validated by parsing the date string (or using regular expressions). An example of date validation using string methods can be found at SmartWebby (2009)[1]

Example jsValDate_01.htm

To compare dates it is easiest to compare the international date format yyyymmdd e.g. 20100602 is greater than 20100131. (in the New Zealand date format ddmmyyyy this is not true as 31012010 > 02062010). To simplify user input I suggest you put the format you want onto the form. If you want to use the country specific format (e.g. NZ dd/mm/yyyy) use string manipulation to change to yyyymmdd then compare.

A very clever way to test if a date is valid, is to ask JavaScript to create a date from your values then test them

var intYear = "2011";
var intMonth = "12";
var intDay = "1";
var objDate = new Date(intYear, intMonth-1, intDay);
if ((objDate.getMonth()+1!=intMonth)||(objDate.getDate()!=intDay)||(objDate.getFullYear()!=intYear)) {
//display error
}

Comparing two dates can be achieved using the date object:

var x=new Date();
x.setFullYear(2012,0,14);
var today = new Date();
if (x>today)
  { alert("Today is before 14th January 2012"); }
else
  { alert("Today is after 14th January 2012"); }

w3Schools[2]


Some test data

The following list shows some dates you can use to test your date routine. (I am using a dd/mm/yyyy format)

  • 01/01/2010, 31/12/2010 - valid (always check it works before testing for errors :) )
  • dd (day invalid) 99/01/2010, a1/01/2010, 30/02/2010 (Feb max 29), 31/09/2010 (Sep max 30)
  • mm (month invalid) 01/99/2010, 01/aa/2010
  • yyyy (year invalid) 01/01/10

Depending on your implementation you may also need to check 1/4/10 (shortened input)

Phone number validation

  • You will find many examples of JavaScript where phone numbers are validated using a mask (e.g. (##) ###-#### ). Personally, I think mask based phone numbers create more problems than they solve. E.g. 111 (or 911) are valid phone numbers, 4 digit mobile numbers exist, as do a wide variety of freephone (0800) 123-123 and cell phone numbers.
  • For phone numbers I think it is adequate to check for numerics, space, brackets () and a dash. You may want to consider alphabetic numbers e.g. 0800 CALL ME depending on your application.


Adding a form (using connected media)

It is also possible to add a form using public server based systems such as Google docs and email me form. This has the advantage of getting around the local email client requirement, however, as customer data is routed via someone else's server think about the security of the data.

Refer to Adding a form for more details.

VmvIcon References.png References

  1. SmartWebby (2009) DHTML date validation script for dd/mm/yyyy. Retrieved June 10, 2009 from http://www.smartwebby.com/dhtml/
  2. Refsnes Data (2012) w3Schools. Retrieved from http://www.w3schools.com/js/js_obj_date.asp

virtualMV  |  Superquick wiki guide  |  Please give me some feedback

VirtualMV/JavaScript/Forms/Validation. (2017). In WikiEducator/VirtualMV wiki. Retrieved October 19, 2017, from http://wikieducator.org/VirtualMV/JavaScript/Forms/Validation    (zotero)