- download
validator.jsfrom repository - include this file to your project
- make sure your HTML-syntax looks like this:
<div class="form-group">
<label class="control-label" for="input_id">Required</label>
<input type="text" id="input_id" class="form-control" name="input_name">
</div>- initialize form validation with
var form = new Validation('#form_id', {
fields: [{
name: 'input_name',
rule: {
type: 'validation_type', // check if input value matches validation-type
prompt: 'enter error prompt message', // displays error help block if value is not valid
showSuccess: false // do not show success status on form-group if value is valid
}
}, // add more fields
],
submitOnValid: false, // do not submit html form; triggers 'is-valid'-callback
errorMessageText: "Custom Error Message", // set text for error alert
errorGroupClass: "has-error has-feedback", // set error class for form-group
successGroupClass: "has-success has-feedback" // set success class for form group
});- validation gets triggered when user submits the form
reset your form with:
form.reset();open index.html with your browser for live demo
| 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 YYYY IMPORTANT: 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 |
| Option | Explanation | default |
|---|---|---|
fields.name |
HTML input name to identify input element | none |
fields.rule.type |
Specify validation pattern for this input name. See Validation Rules for more information | none |
fields.rule.prompt |
Create .help-block with prompt text to display error message on invalid input |
none |
fields.rule.showSuccess |
Show success status for .form-group on valid input |
true |
submitOnValid |
Action after form validation - true: submit form and navigate to form action route - false: triggered callback See Form Callbacks for more information |
true |
showErrorMessage |
Show alert-danger on invalid form | true |
errorMessageText |
Customize alert-danger message | "Please check the fields below." |
errorGroupClass |
Set your own error-class for .form-group on error |
"has-error" |
successGroupClass |
Set your own success-class for .form-group on success |
"has-success" |
is-validcallback for valid form fields on subimt submitis-invalidcallback for invalid form fields on form submit
- Chrome v62 on Windows
- Firefox v56 on Windows
- Internet Explorer v11 on Windows
- Microsoft Edge v25 on Windows
- Chrome v62 on Mac
- Firefox v56 on Mac
- Safari v11 on Mac
- 1.2.0: Added date validation rule
- 1.1.0: Added custom error and success class options for
form-group