Page 1 of 1

Dynamic Form Validation Rate Topic: -----

#1 noorahmad  Icon User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Posted 04 July 2009 - 11:17 PM

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
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)
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:
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.
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
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

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


Is This A Good Question/Topic? 0
  • +

Page 1 of 1