Author: | horprogs |
---|---|
Views Total: | 1,740 views |
Official Page: | Go to website |
Last Update: | February 7, 2023 |
License: | MIT |
Preview:

Description:
Just-validate is a dependency-free, HTML5 data attribute-based form validation that supports both client-side and server-side form validation.
Validation rules are fully customizable via JavaScript. Compatible with Bootstrap framework.
Install it via package managers.
# NPM $ npm install just-validate # Bower $ bower install just-validate
Basic usage:
1. Import the Just-validate library or directly load the minified version of the Just-validate library in the html document.
import JustValidate from 'just-validate';
<script src="/dist/just-validate.production.min.js"></script>
2. Define your validation rules and apply them to form fields. All available rules:
- required
- minLength
- maxLength
- number
- minNumber
- maxNumber
- password
- strongPassword
- customRegexp
- minFilesCount
- maxFilesCount
- files
// initialize the validation library const validation = new JustValidate('#form', { errorFieldCssClass: 'is-invalid', }); // apply rules to form fields validation .addField('#name', [ { rule: 'minLength', value: 3, }, { rule: 'maxLength', value: 30, }, ]) .addField('#email', [ { rule: 'required', errorMessage: 'Field is required', }, { rule: 'email', errorMessage: 'Email is invalid!', }, ]) .addField('#password', [ { rule: 'password', }, ]) .addField('#message', [ { validator: (value) => { return value[0] === '!'; }, }, ]) .addField('#consent_checkbox', [ { rule: 'required', }, ]) .addField('#favorite_animal_select', [ { rule: 'required', }, ]) .addRequiredGroup( '#read_terms_checkbox_group', 'You should select at least one communication channel' ) .addRequiredGroup('#communication_radio_group') .onSuccess((event) => { console.log('Validation passes and form submitted', event); });
3. More API methods.
validation // on fail event .onFail(fields) => { // ...}) // re-validate fileds .revalidateField(field: string).then(isValid => {}) // revalidate the form .revalidate().then(isValid => {}) // remove validation rules/events/errors from a field .removeField(field: string) // remove validation rules/events/errors from a group .removeGroup(group: string) // show errors programmatically .showErrors({ '#email': 'The email is invalid' }) // show success labels .showSuccessLabels({ '#email': 'The email looks good!', }); // triggered after every validation run. .onValidate({ isValid, isSubmitted, fields, groups, }) // refresh the form .refresh() // destroy the instance .destroy()
4. Customize the form validation library.
const validation = new JustValidate('#form', { errorFieldCssClass: 'is-invalid', errorFieldStyle: { border: '1px solid red', }, errorLabelCssClass: 'is-label-invalid', errorLabelStyle: { color: 'red', textDecoration: 'underlined', }, successFieldCssClass: 'just-validate-success-field', successLabelCssClass: 'just-validate-success-label', focusInvalidField: true, validateBeforeSubmitting: true, lockForm: true, successMessage: 'Success Message', tooltip: { position: 'top', }, }, [ // localize the library here { key: 'Name is too short', dict: { ru: 'Имя слишком короткое', es: 'El nombre es muy corto', }, }, { key: 'Field is required', dict: { ru: 'Обязательное поле', es: 'Se requiere campo', }, }, ] });
Changelog:
v4.2.0 (02/07/2023)
- add onValidate callback
v4.1.0 (02/01/2023)
- add revalidateGroup method
v4.0.2 (01/11/2023)
- Bug Fixes
v4.0.1 (01/04/2023)
- make the context compatible with the old interface
v4.0.0 (12/29/2022)
- skip email validation if the field is empty
- add integer rule
v3.10.0 (12/11/2022)
- allow using elements as keys for addField, removeField etc
v3.9.1 (12/09/2022)
- Bug Fixes
v3.9.0 (12/08/2022)
- Bug Fixes
- add validateBeforeSubmitting feature
v3.8.1 (05/18/2022)
- Bug Fixes
v3.8.0 (05/18/2022)
- add showSuccessLabels method
v3.7.0 (05/05/2022)
- made it possible to define multiple class names as a string and list of strings
v3.6.1 (05/03/2022)
- fix reset disabled attr unlockForm
v3.6.0 (05/02/2022)
- add showErrors method
v3.5.2 (04/19/2022)
- Bug Fixes
v3.5.1 (02/19/2022)
- return the validation result in revalidate methods
v3.5.0 (02/15/2022)
- add revalidate() and revalidateField() methods for manual revalidation
v3.4.0 (02/01/2022)
- add custom error labels placement
v3.3.4 (01/28/2022)
- add field method
v3.3.3 (01/27/2022)
- Bug Fixes
v3.3.2 (01/26/2022)
- Bug Fixes
v3.3.1 (01/19/2022)
- Bug Fixes
v3.3.0 (01/10/2022)
- add conditional messages
- add success messages
v3.2.0 (12/30/2021)
- add date validation and plugin support
v3.1.2 (12/30/2021)
- Bugfixes
v3.1.1 (12/27/2021)
- Bugfixes
v3.1.0 (12/27/2021)
- add minFilesCount, maxFilesCount, files rules for files validation
v3.0.0 (12/27/2021)
- rules for maxLength, maxNumber etc. will not raise an error if the field is empty and there is no required rule. To validate for required you should define required rule directly.
- change required logic
v2.2.0/1 (12/27/2021)
- change required logic
v2.1.0 (12/22/2021)
- add removeField method
v2.0.0 (12/07/2021)
- add basic methods, ecosystem, basic test
- add group validation, rename interfaces, render errors
- add localisation, fix select
- add new tooltips
- add onFail callback
- add rendering, clearing errors
- bugfixes
09/28/2019
- v1.5.0: Added focusWrongField and invalidFormCallback
06/29/2019
- v1.4.0: Added feature to allow the user to provide their own validation function
04/13/2019
- v1.3.1: fix(semver): test semver
12/02/2018
- v1.3.0: Added feature for check required radio buttons
09/22/2018
- v1.2.0: fix path, rename params
ia have two file to uploade, how can i upload them?
many thanks