Quick Bootstrap Form Validation With jQuery validator.js plugin
In my new post I going to share lightweight jquery plugin to add Quick client side Validation on your bootstrap form. Validator.js is a cool lightweight jQuery validation plugin for Bootstrap that shows error messages for invalid form fields before submitting and helps to prevent submission of wrong inputs data. You can easily customize error messages with your own custom messages.
Integrate Bootstrap Form Validation Plugin
Follow below steps to add validation on your bootstrap form.
Libraries
Add bootstrap library after that add validator.js on page.
<!--CSS--> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <!--JS--> <script src="//code.jquery.com/jquery-latest.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="validator.js"></script>
HTML
For demo purpose created sample HTML form with almost all the input types.
<form action="" id="form">
<div class="form-group">
<label class="control-label" for="text1">Required</label>
<input type="text" id="text1" class="form-control" name="text1">
<div class="help-block">Initial Help Block</div>
</div>
<div class="form-group">
<label class="control-label" for="text2">E-Mail</label>
<input type="text" id="text2" class="form-control" name="text2">
</div>
<div class="form-group">
<label class="control-label" for="text3">Min Length</label>
<input type="text" id="text3" class="form-control" name="text3">
</div>
<div class="form-group">
<label class="control-label" for="text4">Max Length</label>
<input type="text" id="text4" class="form-control" name="text4">
</div>
<div class="form-group">
<label class="control-label" for="text5">Regular Expression Validation</label>
<input type="text" id="text5" class="form-control" name="text5" placeholder="regex for: test5">
</div>
<div class="form-group">
<label class="control-label" for="text6">Disabled Field</label>
<input type="text" id="text6" class="form-control" name="text6" disabled placeholder="Validation will not be triggered">
</div>
<div class="form-group">
<div class="checkbox">
<label for="text7">
<input type="checkbox" name="text7" id="text7" value="">
Checkbox 1
</label>
</div>
<div class="checkbox">
<label for="text75">
<input type="checkbox" name="text7" id="text75" value="">
Checkbox 2
</label>
</div>
</div>
<div class="form-group">
<div class="radio">
<label for="text8">
<input type="radio" name="text8" id="text8" value="">
Radio 1
</label>
</div>
<div class="radio">
<label for="text85">
<input type="radio" name="text8" id="text85" value="">
Radio 2
</label>
</div>
</div>
<div class="form-group">
<label class="control-label" for="text9">Select Field</label>
<select id="text9" class="form-control" name="text9">
<option value="">Please Select</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<label class="control-label" for="text10">Date Format</label>
<input type="text" id="text10" class="form-control" name="text10" placeholder="YYYY-MM-DD | MM.DD.YYYY | MM DD YYYY">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Submit Form</button>
</div>
<div class="form-group">
<button type="reset" id="reset" class="btn btn-default">Reset Fields</button>
</div>
</form>
JS
Finally Initialize the plugin and apply the validation rules to the form fields, You can also put your own custom messages.
<script>
$(function() {
new Validation('#form', {
fields: [
{
name: 'text1',
rule: {
type: 'required',
prompt: 'Please type in any value'
}
}, {
name: 'text2',
rule: {
type: 'email',
prompt: 'Please enter a valid email address'
}
}, {
name: 'text3',
rule: {
type: 'minLength:5',
prompt: 'Enter at least 5 characters'
}
}, {
name: 'text4',
rule: {
type: 'maxLength:5',
prompt: 'You cannot enter more than 5 characters'
}
}, {
name: 'text5',
rule: {
type: 'regex:^test5$',
prompt: 'This field does not match the regular expression'
}
}, {
name: 'text6',
rule: {
type: 'required',
prompt: 'Field6 is disabled'
}
}, {
name: 'text7',
rule: {
type: 'checked',
prompt: 'Any checkbox needs to be checked'
}
}, {
name: 'text8',
rule: {
type: 'checked',
prompt: 'One radio needs to be checked'
}
}, {
name: 'text9',
rule: {
type: 'required',
prompt: 'Select one field'
}
}, {
name: 'text10',
rule: {
type: 'date',
prompt: 'Please enter a valid date format'
}
}
],
submitOnValid: false,
showErrorMessage: true,
errorMessageText: "Set Your Custom Error Message",
errorGroupClass: "has-error has-feedback",
successGroupClass: "has-success has-feedback"
});
$('#form')
.on('is-valid', function (e) {
console.log('valid');
})
.on('is-invalid', function (e) {
console.log('invalid');
});
});
</script>
See live demo and download source code.
DEMO | DOWNLOAD
Validation Rules
| Pattern | Explanation |
|---|---|
| required | any word characters |
| any valid e-mail address | |
| date | valid date formats: YYYY-MM-DD or MM.DD.YYYY or MM DD YYYYIMPORTANT: only checks if the format is valid |
| minLength:X | value must be at least X characters long |
| maxLength:X | value cannot be longer than X characters |
| regex:X | regex check for value |
| checked | check if checkbox / radio is checked |
See official github repository for more information and follow for future updates. Don’t forget to read license for using above plugin in your commercial project.
