Form Validation Using jQuery
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:{ required:true, minlength:5 }, lastname:{ required:true }, username:{ required:true, minlength:5 }, email:{ required:true, email:true }, password:{ required:true, minlength: 8 }, confirm_password:{ required:true }
},
messages:{
firstname:{ required:"Please Enter First Name", minlength:"Enter atleast 5 letters" }, lastname:"Please Enter Last Name", username:{ required:"Please Enter Username", minlength:"Your username must consist of atleast 2 characters" }, email:{ required:"Please Enter Email", email: "Your email address must be in the format of name@domain.com" }, password:"Please Enter Password", confirm_password:"Please Confirm Password"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<form class="cmxform" name="signupForm" id="signupForm">
<fieldset>
<p>
<legend>First Name</legend>
<input type="text" name="firstname" id="firstname">
</p>
<p>
<legend>Last Name</legend>
<input type="text" name="lastname" id="lastname">
</p>
<p>
<legend>Username</legend>
<input type="text" name="username" id="username">
</p>
<p>
<legend>Password</legend>
<input type="password" name="password" id="password">
</p>
<p>
<legend>Confirm Password</legend>
<input type="password" name="confirm_password" id="confirm_password">
</p>
<p>
<legend>Email</legend>
<input type="email" name="email" id="email">
</p>
<p>
<button type="submit">Submit</button>,
</p>
</fieldset>
</form>
</body>
</html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#signupForm").validate({
rules:{
firstname:{ required:true, minlength:5 }, lastname:{ required:true }, username:{ required:true, minlength:5 }, email:{ required:true, email:true }, password:{ required:true, minlength: 8 }, confirm_password:{ required:true }
},
messages:{
firstname:{ required:"Please Enter First Name", minlength:"Enter atleast 5 letters" }, lastname:"Please Enter Last Name", username:{ required:"Please Enter Username", minlength:"Your username must consist of atleast 2 characters" }, email:{ required:"Please Enter Email", email: "Your email address must be in the format of name@domain.com" }, password:"Please Enter Password", confirm_password:"Please Confirm Password"
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<form class="cmxform" name="signupForm" id="signupForm">
<fieldset>
<p>
<legend>First Name</legend>
<input type="text" name="firstname" id="firstname">
</p>
<p>
<legend>Last Name</legend>
<input type="text" name="lastname" id="lastname">
</p>
<p>
<legend>Username</legend>
<input type="text" name="username" id="username">
</p>
<p>
<legend>Password</legend>
<input type="password" name="password" id="password">
</p>
<p>
<legend>Confirm Password</legend>
<input type="password" name="confirm_password" id="confirm_password">
</p>
<p>
<legend>Email</legend>
<input type="email" name="email" id="email">
</p>
<p>
<button type="submit">Submit</button>,
</p>
</fieldset>
</form>
</body>
</html>
Comments
Post a Comment