Tuesday, 12 December 2017
- Validate login form using JQuery.
Here I have created a simple HTML form with two fields- User Name and Password.
When user click submit button before enter username and password in that text boxes there is an alert will be shown as "Please enter User Name" and "Please enter Password".
HTML Code:
<!DOCTYPE
html>
<html>
<head>
<meta
charset="utf-8">
<meta
name="viewport"
content="width=device-width,
initial-scale=1">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body
{
background-color:
seagreen;
}
.panel-heading
{
padding:
5px
15px;
}
.panel-footer
{
padding:
1px
15px;
color:
#A0A0A0;
}
.profile-img
{
width:
96px;
height:
96px;
margin:
0
auto
10px;
display:
block;
-moz-border-radius:
50%;
-webkit-border-radius:
50%;
border-radius:
50%;
}
</style>
</head>
<body>
<div
class="container"
style="margin-top:40px">
<div
class="row">
<div
class="col-sm-6
col-md-4 col-md-offset-4">
<div
class="panel
panel-default">
<div
class="panel-heading">
<h3
class="text-primary">Sign
in to continue</h3>
</div>
<div
class="panel-body">
<form
role="form"
action="#"
method="POST">
<fieldset>
<div
class="row">
<div
class="center-block">
<img
class="profile-img"
src="https://ssl.gstatic.com/accounts/ui/avatar_2x.png"
alt="">
</div>
</div>
<div
class="row">
<div
class="col-sm-12
col-md-10 col-md-offset-1 ">
<div
class="form-group">
<div
class="input-group">
<span
class="input-group-addon">
<i
class="glyphicon
glyphicon-user"></i>
</span>
<input
class="form-control"
placeholder="Username"
id="username"
type="text">
</div>
</div>
<div
class="form-group">
<div
class="input-group">
<span
class="input-group-addon">
<i
class="glyphicon
glyphicon-lock"></i>
</span>
<input
class="form-control"
placeholder="Password"
id="password"
type="password">
</div>
</div>
<div
class="form-group">
<input
type="submit"
id="btnSubmit"
class="btn
btn-lg btn-primary btn-block"
value="Sign
in">
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div
class="panel-footer
text-primary ">
Don't
have an account! <a
href="#"
onClick="">
Sign Up Here </a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Script:
<script>
$(document).ready(function
() {
$("#btnSubmit").click(function
() {
var
userName = $("#username");
var
password = $("#password");
if
(userName.val() == "")
{
alert("Please
enter User Name");
userName.focus();
return
false;
}
else
if
(password.val() == "")
{
alert("Please
enter Password");
password.focus();
return
false;
}
else
{
alert("Success!");
}
});
});
</script>
Subscribe to:
Comments (Atom)