Jquery Validation using validate.js for beginners
Create index.html file and put this code bellow. :)
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<style type="text/css">
.label {width:100px;text-align:right;float:left;padding-right:10px;font-weight:bold;}
#RegisterFrom label.error, .output {color:#FB3A3A;}
</style>
</head>
<body>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form action="" method="post" id="RegisterFrom" novalidate="novalidate" role="form" >
<div class="col-md-12">
<h2 class='text-primary text-center'>Register From</h2>
</div>
<div class='col-md-12'>
<input type="text" id="name" name="name" placeholder="Full Name" class='form-control'/><br>
</div>
<div class='col-md-12'>
<select id="gender" name="gender" class='form-control'>
<option value="">Select Gender</option>
<option value="Female">Female</option>
<option value="Male">Male</option>
<option value="Other">Other</option>
</select><br>
</div>
<div class='col-md-12'>
<input type="text" id="address" name="address" placeholder="Address" class='form-control'/><br>
</div>
<div class='col-md-12'>
<input type="text" id="email" name="email" placeholder="Email address" class='form-control'/><br>
</div>
<div class='col-md-12'>
<input type="text" id="username" name="username" placeholder="Username" class='form-control'/><br>
</div>
<div class='col-md-12'>
<input type="password" id="password" name="password" placeholder="Password" class='form-control'/><br>
</div>
<div class='col-md-12'>
<input type="submit" name="submit" value="Submit" class='btn btn-success' />
</div>
</form>
</div>
</div>
<script src="//code.jquery.com/jquery-1.9.1.js" type="text/javascript"></script>
<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js" type="text/javascript"></script>
<script>
// When the browser is ready...
$(function () {
// Setup form validation on the #register-form element
$("#RegisterFrom").validate({
// Specify the validation rules
rules: {
name: "required",
gender: "required",
address: "required",
email: {
required: true,
email: true
},
username: "required",
password: {
required: true,
minlength: 5
}
},
// Specify the validation error messages
messages: {
name: "Please enter your name",
gender: "Please specify your gender",
address: "Please enter your address",
email: "Please enter a valid email address",
username: "Please enter a valid username",
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
}
},
submitHandler: function (form) {
form.submit();
}
});
});
</script>
</body>
</html>
0 comments:
Post a Comment