Dynamic Form Validation Options

[noorahmad]

in this tutorial i am show how to validate a form from external file using JavaScript
lets start:

first declare variables (Array) to hold our form elements values

javascript

var Values = Array(); // For Values
var type = Array();    // Type Ex ('Email, Number, Text, etc...')
var Msg =  Array();   // in case of empty or type not matching show message
var msg = null;         // this variable is show the final message,

this function is assigning the value variables,
i variable is for index of array (you can access a value from array by using index of that value).
index of array is starting from 0(zero)

javascript

function set(i,value,Type,message)
{
	name[i] = value;
	type[i]=Type;
	Msg[i]=message;
}

who to use it? just call this function and pass the value of form element:

javascript

var ele = document.getElementById(element_id).value;
set(0 // this is index of array, or key of value which we are passing to values array, for second element we will pass 1
set(0,ele,"Number","Not A Number - Please Type a Valid Number");

for making our code easy lets create another function for getting form value and returning it to set function.

javascript

function ele(name) // simply pass id of form element and it will return value of passed element.
{
	return document.getElementById(name).value;
}

and example of the above code

javascript

set(0,ele('txtUsername'),"Text","-Please Type Username\r\n");
set(1,ele('txtPassword'),"Text","-Please Type Password\r\n");

var error = false;when and error Occur we will change it to true.
msg = "Follwoing Field(s) Required\r\n"; when and error Occur we will add message From Msg variable

javascript

function r()
{	
	var	error = false;
	msg = "Follwoing Field(s) Required\r\n";
	for(var i in name) // for loop. it is checking each Value in Values variable
	{
		var val = name[i];
		if(val=="" || val==null) //checking if it is null or emtpy if yes then
		{
			error = true;        // change error variable to true 
			if(msg.indexOf(Msg[i]) == -1) // handling dublicate message
				{
					msg+=Msg[i]; //adding message form Msg variable
				}
		}
		switch(type[i]) // using switch for checking type from Type variable
		{
			case "Email": //Checking For Email.
			if(val.indexOf('@')== -1 && val.indexOf('.')==-1)
			{
				error = true;
				if(msg.indexOf(Msg[i]) == -1)
				{
					msg+=Msg[i];
				}
			}
			break;
			
			case "Number": // checking 
			num = parseFloat(val);
			if(isNaN(num))
			{				
				error = true;
				if(msg.indexOf(Msg[i]) == -1)
				{
					msg+=Msg[i];
				}
			}
			break;		
		}
	}	
	return error; // and finally return the error (true or false).
}

and how to use it

HTML

<script src="javascript.js" language="javascript"></script>
<form name="form1" method="post" action="">
<table width="500" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="121">Username</td>
<td width="379"><label>
<input type="text" name="username" id="username">
</label></td>
</tr>
<tr>
<td>Password</td>
<td><label>
<input type="text" name="password" id="password">
</label></td>
</tr>
<tr>
<td>Email</td>
<td><label>
<input type="text" name="email" id="email">
</label></td>
</tr>
<tr>
<td>Mobile</td>
<td><label>
<input type="text" name="mobile" id="mobile">
</label></td>
</tr>
<tr>
<td> </td>
<td><label>
<input type="button" name="button" id="button" value="Submit" onClick="val();">
</label></td>
</tr>
</table>
</form>
<script language="javascript">
function val()
{
set(0,ele('username'),"Text","-Please Type Username\r\n");
set(1,ele('password'),"Text","-Please Type Password\r\n");
set(2,ele('email'),'Email','-Pleaes Type a Valid Email Address\r\n');
set(3,ele('mobile'),'Number','-Please Type a Valid Number');
// Here You can pass more elements.
check();
if(check())
{
alert(msg);
}
else
{
document.getElementById('frmlogin').submit();
}
}
function ele(name)
{
return document.getElementById(name).value;
}
</script>