HTML Usage
<form id="form" novalidate="novalidate">
<div class="form-group"><label>Email</label> <input type="email" placeholder="Enter email"
class="form-control" required="" aria-required="true"></div>
<div class="form-group"><label>Password</label> <input type="password" placeholder="Password"
class="form-control" name="password">
</div>
<div class="form-group"><label>Url</label> <input type="text" placeholder="Enter website url"
class="form-control" name="url">
</div>
<div class="form-group"><label>Number</label> <input type="text" placeholder="Enter numbers only"
class="form-control" name="number"></div>
<div class="form-group"><label>MinLength</label> <input type="text" placeholder="Enter min length"
class="form-control" name="min">
</div>
<div class="form-group"><label>MaxLength</label> <input type="text" placeholder="Enter max length"
class="form-control" name="max">
</div>
<div>
<button class="btn btn-sm btn-info m-t-n-xs" type="submit"><strong>Submit</strong></button>
</div>
</form>
HTML Usage
<form id="signupForm" method="post" class="form-horizontal" novalidate="novalidate">
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="firstname">First name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="firstname" name="firstname"
placeholder="First name">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="lastname">Last name</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="lastname" name="lastname" placeholder="Last name">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="username">Username</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="username" name="username" placeholder="Username">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="email">Email</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="email" name="email" placeholder="Email">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="phone">Phone</label>
<div class="col-sm-6">
<input type="number" class="form-control" id="phone" name="phone" placeholder="Contact Numbar">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="address">Address</label>
<div class="col-sm-6">
<textarea name="address" id="address" class="form-control" cols="30" rows="5"></textarea>
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="password">Password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="password" name="password"
placeholder="Password">
</div>
</div>
<div class="form-group row">
<label class="col-sm-4 col-form-label" for="confirm_password">Confirm password</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="confirm_password" name="confirm_password"
placeholder="Confirm password">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 offset-sm-4">
<div class="form-check">
<input type="checkbox" id="agree" name="agree" value="agree" class="form-check-input">
<label class="form-check-label">Please agree to our policy</label>
</div>
</div>
</div>
<div class="form-group row">
<div class="col-sm-9 offset-sm-4">
<button type="submit" class="btn btn-info" name="signup" value="Sign up">Sign up</button>
</div>
</div>
</form>
Javascript Usage
<!-- Jquery Validate -->
<script src="plugins/validate/jquery.validate.min.js"></script>
<script>
$(document).ready(function () {
$("#form").validate({
rules: {
password: {
required: true,
minlength: 3
},
url: {
required: true,
url: true
},
number: {
required: true,
number: true
},
min: {
required: true,
minlength: 6
},
max: {
required: true,
maxlength: 4
}
}
});
});
</script>
Javascript Usage
<!-- Jquery Validate -->
<script src="plugins/validate/jquery.validate.min.js"></script>
<script>
$.validator.setDefaults({
submitHandler: function () {
alert("submitted!");
}
});
$(document).ready(function () {
$("#signupForm").validate({
rules: {
firstname: "required",
lastname: "required",
username: {
required: true,
minlength: 2
},
phone: {
required: true,
minlength: 7
},
address: {
required: true,
minlength: 10
},
password: {
required: true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
},
email: {
required: true,
email: true
},
agree: "required"
},
messages: {
firstname: "Please enter your firstname",
lastname: "Please enter your lastname",
username: {
required: "Please enter a username",
minlength: "Your username must consist of at least 2 characters"
},
phone: {
required: "Please enter a contact number",
minlength: "Your contact number must consist of at least 7 characters"
},
contact: {
required: "Please enter your address",
minlength: "Your address must consist of at least 6 characters"
},
password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long"
},
confirm_password: {
required: "Please provide a password",
minlength: "Your password must be at least 5 characters long",
equalTo: "Please enter the same password as above"
},
email: "Please enter a valid email address",
agree: "Please accept our policy"
},
errorElement: "em",
errorPlacement: function (error, element) {
// Add the `invalid-feedback` class to the error element
error.addClass("invalid-feedback");
if (element.prop("type") === "checkbox") {
error.insertAfter(element.next("label"));
} else {
error.insertAfter(element);
}
},
highlight: function (element, errorClass, validClass) {
$(element).addClass("is-invalid").removeClass("is-valid");
},
unhighlight: function (element, errorClass, validClass) {
$(element).addClass("is-valid").removeClass("is-invalid");
}
});
});
</script>
List of built-in Validation methods
A set of standard validation methods is provided:
Method | Description |
---|---|
remote | Requests a resource to check the element for validity. |
minlength | Makes the element require a given minimum length. |
maxlength | Makes the element require a given maxmimum length. |
rangelength | Makes the element require a given value range. |
min | Makes the element require a given minimum. |
max | Makes the element require a given maximum. |
range | Makes the element require a given value range. |
Makes the element require a valid email | |
url | Makes the element require a valid url |
date | Makes the element require a date. |
dateISO | Makes the element require an ISO date. |
number | Makes the element require a decimal number. |
digits | Makes the element require digits only. |
creditpanel-box | Makes the element require a credit panel-box number. |
equalTo | Requires the element to be the same as another one |