<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1>Registration Form</h1>
<hr />
<form action="#" name="regForm" id="regForm">
<div class="form-group">
<label>Name: </label>
<input type="text" class="form-control"
id="name"
placeholder="Name"/>
<p id="p1"></p>
</div>
<div class="form-group">
<label>Email: </label>
<input type="email" class="form-control"
id="email"
placeholder="Email"/>
<p id="p2"></p>
</div>
<div class="form-group">
<label>Password: </label>
<input type="password" class="form-control"
id="password"
placeholder="Password"/>
<p id="p3"></p>
</div>
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block"
id="submit"/>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
#p1, #p2, #p3
{
color: #FF0000;
}
$(document).ready(function() {
$("#submit").click(function() {
var name = $("#name").val();
var email = $("#email").val();
var pass = $("#password").val();
if(name.length == "")
{
$("#p1").text("Please enter your name");
$("#name").focus();
return false;
}
else if(email.length == "")
{
$("#p2").text("Please enter your email address");
$("#email").focus();
return false;
}
else if(pass.length == "")
{
$("#p3").text("Please enter your password");
$("#Password").focus();
return false;
}
else
{
var con = confirm("Are you done?");
if(con == true)
{
alert("Welcome to our website");
return true;
}
else
{
return false;
}
}
});
});
