School Assignment? Project Due Tomorrow? Chat LIVE With A Programming Expert!
Welcome to Dream.In.Code
Become an Expert!

Join 340,149 Programmers for FREE! Get instant access to thousands of experts, tutorials, code snippets, and more! There are 3,834 people online right now. Registration is fast and FREE... Join Now!



Dynamic Form Validation

Page 1 of 1

Dynamic Form Validation Rate Topic: -----

#1 noorahmad  Icon User is offline

  • Author
  • Icon
  • View blog
  • Group: Author w/DIC++
  • Posts: 2,198
  • Joined: 12-March 09


Dream Kudos: 1600

Posted 04 July 2009 - 10: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>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1

1 User(s) are reading this topic
0 members, 1 guests, 0 anonymous users



Live Help!

Be Social

Dream.In.Code RSS Feed Dream.In.Code LinkedIn Group Follow Us On Twitter Fan Us On Facebook

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

DIC Chatroom

Bye Bye Ads

Monthly Drawing

Thumb Drive

Top Contributors

Top 10 Kudos This Month