Topics

JavaScript Documentation

Name Validation

HTML page

  <html>	
  <head>
  <title>JavaScript Tutorial</title>	
  </head>
  <body>
  	<div id="sidebar">
		<form action="#" method="post" name="form1">

		<input type="text" name="name" id="name" placeholder="Enter name here............" onkeyup="inputname(this.value)">
		<p id="nameError"></p>
		<br>
		<input type="text" name="name" id="email" placeholder="Enter email here............" onkeyup="emailvalidation(this.value)"><p id="emailError"></p><br>

		<input type="password" name="name" id="password" placeholder="Enter contact here............" onkeyup="passwordValidation(this.value)">
		<p id="passwordError"></p>
		<br>

		<input type="text" name="contact" id="contact" onkeyup="contactValidation(this.value)" placeholder="Enter contact here............">
		<p id="contactError"></p>
		<br>


		<textarea style="height:120px;">
			
		</textarea><br>

		<input type="submit" name="btn" value="Click" onclick="sh(this)" return false>
			
		</form>

	</div>

	<script type="text/javascript" src="script.js"></script> 
  </body>
  </html> 
	

Name Validation

CSS page

		#sidebar{
			position: relative;

		}
		
		#sidebar input[type="text"],textarea,input[type="submit"],input[type="password"]{
			height: 30px;
			width: 82%;
			margin-left: 5%;
			font-family: verdana;
			font-size: 14px;
			padding-left: 15px;
			position: relative;
		}
		
  		.error{
			background-image: url(images/error.png);
			border:3px solid red;
			background-repeat: no-repeat;
			background-position: top 6px right 10px;
			background-size: 20px 20px;
		}


		.message{
			margin-top: 10px;
			border:1px solid silver;
			border-radius: 4px;
			padding: 10px 35px;
			width: 200px;
			position: absolute;
			min-height: 50px;
			z-index: 100;
			background-color: #F6CDCD;
			box-shadow: 2px 2px 2px silver;
			font-family: verdana;
			font-size: 14px;
			margin-left: 15px;
			background-image: url(images/error.png);
			background-repeat: no-repeat;
			background-position: top 10px left 10px;
			background-size: 17px 17px;
			font-weight: bolder;
		}

		.message:before{
			content: "";
			display: block;
			top: -21px;
			left: 15px;
			width: 0;
			height: 0;
			position: absolute;
			border-left:10px solid transparent;
			border-right:10px solid transparent;
			border-top:10px solid transparent;
			border-bottom:10px solid #F6CDCD;
		}


		.successMessage{
			margin-top: 10px;
			border:1px solid silver;
			border-radius: 4px;
			padding: 10px 35px;
			width: 200px;
			position: absolute;
			min-height: 50px;
			z-index: 100;
			background-color: #9ECF67;
			box-shadow: 2px 2px 2px silver;
			font-family: verdana;
			font-size: 14px;
			margin-left: 15px;
			background-image: url(images/error.png);
			background-repeat: no-repeat;
			background-position: top 10px left 10px;
			background-size: 17px 17px;
			font-weight: bolder;
		
		}


		.successMessage:before{
			content: "";
			display: block;
			top: -21px;
			left: 15px;
			width: 0;
			height: 0;
			position: absolute;
			border-left:10px solid transparent;
			border-right:10px solid transparent;
			border-top:10px solid transparent;
			border-bottom:10px solid #9ECF67;
		}

	

JavaScript function for Form Validation

JavaScript File

 	
	function inputname(str){
	var inputname = str;
	var name = document.getElementById("name");
	var error = document.getElementById("nameError");
	var expression = /^[A-Za-z ]+$/;
		if(inputname == ""){
			name.setAttribute("class",'error');
			error.removeAttribute("class");
			error.innerHTML = '';

		}
		else if(!inputname.match(expression)){
			error.setAttribute("class","message");
			error.innerHTML = 'Input must be character';
		}
		else
		{
			if(inputname.length < 5 || inputname.length > 15){
				error.setAttribute("class","message");
				error.innerHTML = 'your input min 4 and max 15 character';
			}
			else{
			name.removeAttribute("class");
			error.removeAttribute("class");
			error.innerHTML = '';
			}
			
		}


	}




	function emailvalidation(str){
		var inputname = str;
		var name = document.getElementById("email");
		var error = document.getElementById("emailError");
		var expression = /^[A-Za-z]+@[A-Za-z]+\.[A-Za-z]{3}$/;
			if(inputname == ""){
				name.setAttribute("class",'error');
				error.removeAttribute("class");
				error.innerHTML = '';

			}
			else if(!inputname.match(expression)){
				error.setAttribute("class","message");
				error.innerHTML = 'Invalid email Address';
			}
			else
			{
				name.removeAttribute("class");
				error.removeAttribute("class");
				error.innerHTML = '';	
			}


	}



	function passwordValidation(str){
		var inputname = str;
		var name = document.getElementById("password");
		var error = document.getElementById("passwordError");
		var expression = /^[A-Za-z0-9\.$@]+$/;
			if(inputname == ""){
				name.setAttribute("class",'error');
				error.removeAttribute("class");
				error.innerHTML = '';

			}
			else if(!inputname.match(expression)){
				error.setAttribute("class","message");
				error.innerHTML = 'password is not good for your account';
			}
			else
			{

				if(inputname.length < 6)
				{
					error.setAttribute("class","message");
					error.innerHTML = 'your password very week';
				}
				else if(inputname.length > 6 && inputname.length < 10){
					error.setAttribute("class","message");
					error.innerHTML = 'your password mediam';
				}else if(inputname.length > 10 && inputname.length <20)
				{
					error.setAttribute("class","successMessage");
					error.innerHTML = 'your password strong';
				}
				else if(inputname.length >20){
					error.setAttribute("class","message");
					error.innerHTML = 'password must be max 20 character';
				}
				else
				{
					name.removeAttribute("class");
					error.removeAttribute("class");
					error.innerHTML = '';
				}
		
			}


	}





	function contactValidation(str){
		var inputname = str;
		var name = document.getElementById("contact");
		var error = document.getElementById("contactError");
		var expression = /^[+0-9]{6,15}$/;
			if(inputname == ""){
				name.setAttribute("class",'error');
				error.removeAttribute("class");
				error.innerHTML = '';

			}
			else if(!inputname.match(expression)){
				error.setAttribute("class","message");
				error.innerHTML = 'Contact number is not valid';
			}
			else
			{
				name.removeAttribute("class");
				error.removeAttribute("class");
				error.innerHTML = '';	
			}


	}
	

How to make Side Menu

HTML Page

  <html>	
  <head>
  <title>JavaScript Tutorial</title>
	<style>
		#sidemenu{
			width: 300px;
			height: 400px;
			background-color: black;
			position: absolute;
			z-index: 500;
			left:-300px; 
			transition: all 0.5s ease 0s;
		}

		#sidemenu ul{
			margin: 0px;
			padding: 10px;
			list-style: none;
		}

		#sidemenu ul li{
			display: block;
		}

		#sidemenu ul li a{
			color:silver;
			display: block;
			font-size: 14px;
			font-family: verdana;
			text-decoration: none;
			padding: 10px;
			border-bottom: 1px solid #C0C0C0;
			cursor: pointer;
		}

		#sidemenu ul li a:hover{
			background-color: #5B5B5B;
		}
	
	</style>
  </head>
  <body>
 
	<div class="menu" style="width:100%;height:50px; background-color:black;">
	<button onclick="sidemenu()">Menu</button>
	</div>

	<div id="sidemenu" class="hide">
		<ul>
			<li><a href="">Home</a></li>
			<li><a href="">Home</a></li>
			<li><a href="">Home</a></li>
			<li><a href="">Home</a></li>
			<li><a href="">Home</a></li>
			<li><a href="">Home</a></li>
		</ul>

	</div>

	<div class="" style="width:100%;background-color:silver;height:400px;position:relative">


	</div>
 
 
	<script>
		function sidemenu(){
			var className = document.getElementById('sidemenu');
			if(className.style.left == "-300px"){
				className.style.left = "0px";
			}
			else
			{
				className.style.left = "-300px";
			}
			
			
		}
	
	
	</script>
 
  
  </body>
  </html>