ICT19_11282014

 html>
<head>
<style>
.pula{
background-color: red;
}

.red{
text-align: center;
color: red;
}

</style>


<script>
function validateForm(jsid)

{

    	if(document.getElementById(jsid).value == "")

			{
				document.getElementById(jsid + "_msg").innerHTML = "*";
				document.getElementById(jsid).className = "pula";
			}
			else
			{
				document.getElementById(jsid + "_msg").innerHTML = "";
				document.getElementById(jsid).className = "";
			}

			if(jsid == "em")
		{
    		var x = document.getElementById("em").value;
    		var atpos = x.indexOf("@");
    		var dotpos = x.lastIndexOf(".");
    		if (atpos< 1 || dotpos<atpos+2 || dotpos+2>=x.length)
   	 		{
       			document.getElementById("em_msg").innerHTML= "Not a valid e-mail address" ;
    		}
    		else
    		{

    			document.getElementById("em_msg").className = "";

    		}
		}

}


</script>
</head>
<body class="yellow">

<h1 class= "red">Registration Form</h1>
<h2>Please fill out the necessary information needed:</h2>


<form id="form1" name="form1" method="post">
<div>Firstname:<div>
<input class="align"onBlur="validateForm(this.id);" type="text" id="fn" name="fn">
<span id="fn_msg"></span>
<br>

<div>Lastname:</div>
<input class="align"onBlur="validateForm(this.id);"type="text" id="ln" name="ln">
<span id="ln_msg"></span>
<br>

<div>Middle Initial:</div>
<select id="mi" name="mi">
<option value="">Please select</option>
	<option value="A">A</option>
	<option value="B">B</option>
	<option value="C">C</option>
	<option value="D">D</option>
	<option value="E">E</option>
	<option value="F">F</option>
	<option value="G">G</option>
	<option value="H">H</option>
	<option value="I">I</option>
	<option value="J">J</option>
	<option value="K">K</option>
	<option value="L">L</option>
	<option value="M">M</option>
	<option value="N">N</option>
	<option value="O">O</option>
	<option value="P">P</option>
	<option value="Q">Q</option>
	<option value="R">R</option>
	<option value="S">S</option>
	<option value="T">T</option>
	<option value="U">U</option>
	<option value="V">V</option>
	<option value="W">W</option>
	<option value="X">X</option>
	<option value="Y">Y</option>
	<option value="Z">Z</option>
</select> <span id="mi_msg"></span>
<br>
<div>Email:</div>
<input onBlur="validateForm(this.id);" type="text" id="em" name="em">
<span id="em_msg"></span><br>
<div>Gender:<div>
<br>
Male<input type="radio" id="ge" name="ge" value="male" checked="checked">
Female<input type="radio" id="ge" name="ge" value="female">
<br>
<input type="submit" id="sub" name="sub" value="sub">
</form>
</body></html><