Loading
View RSS Feed

Angad Kumar Shukla's blog

Form Validation Using Javascript and CSS

Rating: 23 votes, 4.83 average.
Click image for larger version. 

Name:	snap99.jpg 
Views:	232 
Size:	6.6 KB 
ID:	640
HTML and JavaScript File :

Code:
<html>
<head>
<title>User Registration</title>

<link rel="stylesheet" type="text/css" href="v.css" >
<style type="text/css">
	@import url(d.css);
</style>

<script type="text/javascript">
function FocusControl()
    {
      document.getElementById("urname").focus();
      return true;
    }
function validate()
{

   var name=document.getElementById("urname").value;
   var passwd=document.getElementById("pass").value;
   
   var answer=document.getElementById("sec").value;
   var flag=false;     

  if(mandatory(name,passwd,answer)==true && mem_valid(name)==true)
  {    alert("Registration successful!!!!");
       flag=true;
  }
 return flag;
}
function mandatory(a,b,c)
{
   if (a.length==0 || b.length==0 || c.length==0 )  
   {   alert("All the mandatory fields should be filled!!"); 
     return false;
   }
   return true;
}


function mem_valid(a)
{
	
	var flag=true;
	
      		for(var indx=0;indx<a.length;indx++)
	 	if ((a.toUpperCase().charAt(indx)<'A')||(a.toUpperCase().charAt(indx)>'Z'))
                         {   if((a.charAt(indx)<'0')||(a.charAt(indx)>'9'))
		    if(a.charAt(indx)!=' ')
		    { alert("Member name cannot contain special characters!!");
		       flag=false;
		      break;
                             }		
		}          
       	return flag;
}
</script>

</head>
<body onload="FocusControl();">
<form name="assign" action="https://www.google.com" onsubmit="return validate();">

<table  align="center" border="2" bgcolor="#FFE87C">
<tr>
<th colspan="2"> Enter Member Details</th>
</tr>
<tr>
<td>Member Name:</td>
<td><input type="text" id="urname"/></td>
</tr>

<tr>
<td> Password</td>
<td><input type="password" id="pass"/></td>
</td>
</tr>

<tr>
<td>Secret Question</td>
<td><select name="t1"><option>What is your first school name?</option>
	<option>who is your role model?</option>
	<option>Who is your best firend?</option></select></td>
</tr>

<tr>
<td>Secret Answer:</td>
<td><input type="text" id="sec"/></td>
</tr>

<tr>
<td><center><input type="submit" value="REGISTER" ></center></td>
<td><center><input type="reset" value="RESET"/></center></td>
</tr>
</table>
</form>
</body>
</html>
CSS Files :

d.css
Code:
H1{color:red;}
P{font-size:10px;}
v.css
Code:
body{
		font-family: helvetica, arial;
		font-size: 12px;
		color: #000000;
		background-color: magenta;
		margin: 0px;
		border: 0px solid black;
                             background-image:url('logo.jpg');
}

Submit "Form Validation Using Javascript and CSS" to Digg Submit "Form Validation Using Javascript and CSS" to del.icio.us Submit "Form Validation Using Javascript and CSS" to StumbleUpon Submit "Form Validation Using Javascript and CSS" to Google

Categories
Java , Web Design

Comments




Disclaimer: Users of techforum4u.com are responsible for ensuring that any material they post (article, blog posts, images or other mulitimedia content) does not violate or infringe upon the copyright, patent, trademark, or any personal or proprietary rights of any third party, and is posted with the permission of the owner of such rights.Anyone who violates these rules may have their access privileges removed without warning.