Programming Examples

JavaScript code to validate a Basic html Form


JavaScript code to validate a Basic html Form

Solution

<!DOCTYPE html>  
<html>
	<head>  
		<title>Registration Form</title>    
		<script type="text/javascript">
			function validate()
			{
				/*user ID*/
				if(document.getElementById('userid_txt').value=="")
				{
					document.getElementById('userid_txt_sp').innerHTML="Please enter the User ID";
					return false;
				}
				else if(!(document.getElementById('userid_txt').value).match(/^[a-zA-Z][a-zA-Z0-9_]{4,11}$/))
				{
					document.getElementById('userid_txt_sp').innerHTML="Please enter the valid User ID";
					return false;
				}
				else
				{
					document.getElementById('userid_txt_sp').innerHTML="";
				}		
				/*password*/	
				if(document.getElementById('password_txt').value=="")
				{
					document.getElementById('password_txt_sp').innerHTML="Please enter the Password";
					return false;
				}
				else if((document.getElementById('password_txt').value).length<7 ||(document.getElementById('password_txt').value).length>12 )
				{
					document.getElementById('password_txt_sp').innerHTML="Please enter the 7 to 12 ";
					return false;
				}
				else
				{
					document.getElementById('password_txt_sp').innerHTML="";
				}	
				/*User name */
				if(document.getElementById('name_txt').value=="")
				{
					document.getElementById('name_txt_sp').innerHTML="Please enter the Name";
					return false;
				}
				else if(!(document.getElementById('name_txt').value).match(/^[a-zA-Z]+$/))
				{
					document.getElementById('name_txt_sp').innerHTML="Please enter only Alphabates";
					return false;
				}
				else
				{
					document.getElementById('name_txt_sp').innerHTML="";
				}	
				/*Countrt Select box */
				if(document.getElementById('country_sel').value=="none")
				{
					document.getElementById('country_sel_sp').innerHTML="Please Select the Country";
					return false;
				}
				else
				{
					document.getElementById('country_sel_sp').innerHTML="";
				}	
				/*Zip Code */
				if(document.getElementById('zip_code').value=="")
				{
					document.getElementById('zip_code_sp').innerHTML="Please Select the Zip Code";
					return false;
				}
				else if(!(document.getElementById('zip_code').value).match(/^[0-9]{6}$/))
				{
					document.getElementById('zip_code_sp').innerHTML="Please only 6 Digit ZipCode";
					return false;
				}
				else
				{
					document.getElementById('zip_code_sp').innerHTML="";
				}	
				if(document.getElementById('email_txt').value=="")
				{
					document.getElementById('email_txt_sp').innerHTML="Please Select the Email";
					return false;
				}
				else if(!(document.getElementById('email_txt').value).match(/^[a-zA-Z][a-zA-Z0-9_.]+@[a-zA-Z0-9]+.[a-zA-Z0-9]{2,3}$/))
				{
					document.getElementById('email_txt_sp').innerHTML="Please the Valid Email";
					return false;
				}
				else
				{
					document.getElementById('email_txt_sp').innerHTML="";
				}	
				/* gender */
				if(document.getElementById('male_sex').checked==false && document.getElementById('female_sex').checked==false)
				{
					document.getElementById('sex_sp').innerHTML="Please Select the Gender";
					return false;
				}
				else
				{
					document.getElementById('sex_sp').innerHTML="";
				}
				
				if(document.getElementById('english').checked==false && document.getElementById('non_english').checked==false)
				{
					document.getElementById('language_sp').innerHTML="Please check any one option";
					return false;
				}
				else if(document.getElementById('english').checked==true && document.getElementById('non_english').checked==true)
				{
					document.getElementById('language_sp').innerHTML="Please check Only one option";
					return false;
				}
				else
				{
					document.getElementById('language_sp').innerHTML="";
				}
				
				/*Address*/
				if(document.getElementById('address_txt').value=="")
				{
					document.getElementById('address_txt_sp').innerHTML="";
				}
				else if(!isNaN(document.getElementById('address_txt').value))
				{
					document.getElementById('address_txt_sp').innerHTML="Please enter the Alphabates";
					return false;
				}
				else
				{
					document.getElementById('address_txt_sp').innerHTML="";
				}
				
				/*About*/
				if(document.getElementById('about_txt').value=="")
				{
					document.getElementById('about_txt_sp').innerHTML="";
				}
				else if(!(document.getElementById('about_txt').value).match(/^[a-zA-Z.]+$/))
				{
					document.getElementById('about_txt_sp').innerHTML="Please enter only Alphabates";
					return false;
				}
				else
				{
					document.getElementById('about_txt_sp').innerHTML="";
				}	
					
			}
		</script>
		<style type="text/css">
		.container
		{
			width:600px;
			height:550px;
			padding:20px;
			-webkit-box-shadow:#000000 2px 2px 2px 2px;
			-moz-box-shadow:#000000 2px 2px 2px 2px;
			box-shadow:#000000 2px 2px 2px 2px;
			margin:auto;
		}
		.row
		{
			height:35px;
		}
		.column
		{
			min-width:100px;
			float:left;
			padding-left:10px;
		}
		.right_align
		{
			text-align:right;
		}
		.center_align
		{
			text-align:center;
		}

		textarea
		{
			width:200px;
			height:100px;
		}
		.clear
		{
			clear:both;
		}
		.msg
		{
			color:#ff0000;
		}
		</style>
	</head>  
	<body onsubmit="return validate()">  
		<form id="application_frm" name="application_frm">
			<div class="container">
				<h2>Registration Form</h2>
				<div class="row">
					<div class="column right_align"><label for="userid_txt">User id:</label></div>
					<div class="column"><input type="text" id="userid_txt" name="userid_txt" placeholder="Enter User ID"/><span id="userid_txt_sp" class="msg"></span></div>
				</div>
				<div class="row">
					<div class="column right_align"><label for="password_txt">Password:</label></div>
					<div class="column"><input type="password" id="password_txt" name="password_txt" placeholder="Enter password"/><span id="password_txt_sp" class="msg"></span></div>
				</div>
				<div class="row">
					<div class="column right_align"><label for="name_txt">Name:</label></div>
					<div class="column"><input type="text" id="name_txt" name="name_txt" placeholder="Enter your name"/><span id="name_txt_sp" class="msg"></span></div>
				</div>
				<div class="row">
					<div class="column right_align"><label for="address_txt">Address:</label></div>
					<div class="column"><input type="text" id="address_txt" name="address_txt" placeholder="Enter your address"/><span id="address_txt_sp" class="msg"></span></div>
				</div>
				<div class="row">
					<div class="column right_align"><label for="country_sel">Country:</label></div>
					<div class="column">
						<select id="country_sel" name="country_sel">
							<option value="none">Select any One</option>
							<option value="india">India</option>
							<option value="america">America</option>
							<option value="england">england</option>
						</select><span id="country_sel_sp" class="msg"></span>
					</div>
				</div>
				<div class="row">
					<div class="column right_align"><label for="zip_code">ZIP Code:</label></div>
					<div class="column"><input type="text" id="zip_code" name="zip_code" placeholder="Enter ZIP-code"/><span id="zip_code_sp" class="msg"></span></div>
				</div>
				<div class="row">
					<div class="column right_align"><label for="email_txt">Email:</label></div>
					<div class="column"><input type="text" id="email_txt" name="email_txt" placeholder="Enter your e-mail"/><span id="email_txt_sp" class="msg"></span></div>
				</div>
				<div class="row">
					<div class="column right_align">Sex:</div>
					<div class="column">
						<span>
							<input type="radio" name="sex" value="Male" id="male_sex"/><label for="male_sex">Male</label>
						</span>
						<span>
							<input type="radio" name="sex" value="Female" id="female_sex" /><label for="female_sex">Female</label>
						</span>
						<span id="sex_sp" class="msg"></span>
					</div>
				</div>
				<div class="row">
					<div class="column right_align">Language:</div>
					<div class="column">
						<span>
							<input type="checkbox" name="english" value="english" id="english" checked="checked"/><label for="english">English</label>
						</span>
						<span>
							<input type="checkbox" name="non_english" value="non_english" id="non_english" /><label for="non_english">Non English</label>
						</span>
						<span id="language_sp" class="msg"></span>
					</div>
				</div>
				<div class="row">
					<div class="column right_align"><label for="about_txt">About:</label></div>
					<div class="column">
						<textarea name="about_txt" id="about_txt"></textarea>
						<span id="about_txt_sp" class="msg"></span>
					</div>
				</div>
				<div class="row clear">
					<div class="column">&nbsp;</div>
					<div class="column center_align">
						<span>
							<input type="submit" id="submit_button" name="submit_button" value="Submit"/>
						</span>
					</div>
				</div>
			</div>
		</form>
	</body>
</html>
Output

CCC Online Test 2021 CCC Practice Test Hindi Python Programming Tutorials Best Computer Training Institute in Prayagraj (Allahabad) Best Java Training Institute in Prayagraj (Allahabad) Best Python Training Institute in Prayagraj (Allahabad) O Level NIELIT Study material and Quiz Bank SSC Railway TET UPTET Question Bank career counselling in allahabad Sarkari Naukari Notification Best Website and Software Company in Allahabad Website development Company in Allahabad