Javascript – Simple jQuery Form Validation Example

Javascript – Simple jQuery Form Validation Example

In this Post We Will Explain About is Javascript – Simple jQuery Form Validation Example With Example and Demo.Welcome on Live24u.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to form validation using jquery Example

In this post we will show you Best way to implement simple jquery form validation example code, hear for jquery form validation without plugin with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.




here is the main link for the bootstrap that has been used for the All the offical scipts layout Like as https://getbootstrap.com/ as well as this is the link for the main offical jQuery https://jquery.com/ website used for learn

Also Read :   JavaScript Validation API with DOM Example

Getting Started for A simple jQuery form validation script

We have used CDN(libes) for jquery so you must need Your internet Data connection for them to work on Basic jQuery Form Validation Example.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

index.html

This is the main HTML view of our Simple Web Application. In here, we have init Base declared all our simple my this Example(Jquery form validation tutorial and HTML simple form) dependencies and the HTML Elements that we have created.

<!DOCTYPE html>
<html lang="en">
	<head>
		<link rel="stylesheet" type="text/css" href="live24u/css/bootstrap.css"/>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
	</head>
<body>
	<nav class="live24u navbar navbar-default">
		<div class="live24u container-fluid">
			<a class="navbar-brand" href="http://live24u.com">Live24u.com</a>	</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-success">Jquery form validation tutorial and HTML simple form Javascript - Simple jQuery Form Validation</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<form method="POST" id="myform" action="index.html">
			<div class="live24u form-inline lst">
				<h4>Name</h4>
				<input type="text" name="name" id="name" class="live form-control gst" style="width:50%;"/>
				<span id="live_frm_nm_err" class="text-danger"></span>
			</div>
			<div class="live24u form-inline lst">
				<h4>Enter Username</h4>
				<input type="text" name="frm_uname" id="frm_uname" class="live form-control gst" style="width:50%;"/>
				<span id="live_usernm_error" class="text-danger"></span>
			</div>
			<div class="live24u form-inline lst">
				<h4>User Password</h4>
				<input type="password" name="livemypass" id="livemypass" class="live form-control gst" style="width:50%;"/>
				<span id="live_pass_error" class="text-danger"></span>
			</div>
			<br />
			<center><button class="btn btn-success" style="width:80%;">Submit</button></center>
		</form>
	</div>
</div>
</body>
<script src="js/jquery-3.2.1.js"></script>
<script src="js/script.js"></script>
</html>

index.js(Creating the Script)

This contains our simple custom index.js files Add Like as javascript, jQuery scripts

Also Read :   vuejs Form Validation Example | Vuejs 2 + form validation

$(document).ready(function(){
	$("#live_frm_nm_err").hide();
	$("#live_usernm_error").hide();
	$("#live_pass_error").hide();
 
 
	$("#name").focusout(function(){
		var name = $("#name").val().length;
 
		if(name < 8 || name > 24 ){
			$("#live_frm_nm_err").html("Name must be 5 long");
			$("#live_frm_nm_err").show();
		}else{
			$("#live_frm_nm_err").hide();
		}
	})
 
	$("#frm_uname").focusout(function(){
		var frm_uname = $("#frm_uname").val().length;
 
		if(frm_uname < 8 || frm_uname > 24 ){
			$("#live_usernm_error").html("Your Username at least 8 - 24 or some characters");
			$("#live_usernm_error").show();
		}else{
			$("#live_usernm_error").hide();
		}
	})
 
	$("#livemypass").focusout(function(){
		var livemypass = $("#livemypass").val().length;
 
		if(livemypass < 5){
			$("#live_pass_error").html("Your Password too short");
			$("#live_pass_error").show();
			$("#live_pass_error").attr('class', "text-warning");
		}else if(livemypass > 12){
			$("#live_pass_error").html("Sorry Your Password too long");
			$("#live_pass_error").show();
			$("#live_pass_error").attr('class', "text-danger");
		}else{
			$("#live_pass_error").hide();
		}
	})
});

You are Most welcome in my youtube Channel Please subscribe my channel. and give me FeedBack.
More Details……
Angularjs Example





Example

I hope you have Got What is simple jquery form validation example code And how it works.I would Like to have FeedBack From My Blog(live24u.com) readers.Your Valuable FeedBack,Any Question,or any Comments about This Article(live24u.com) Are Most Always Welcome.