Nice client-side live form validation for Nette Forms 2.4. Script by default works nicely with Twitter Bootstrap 3.
npm install live-form-validation-es6
npm install --save live-form-validation
`
$3
All you need is to link live-form-validation.js file from to your HTML document. That's it!
The script already contains the netteForms.js file, so don't use it again and remove it from your HTML document.
$3
- Dev: https://rawgit.com/contributte/live-form-validation/master/live-form-validation.js
- Stable: https://cdn.rawgit.com/contributte/live-form-validation/v1.8.1/live-form-validation.js
Versions
| State | Version | Branch |
|-------------|-----------|----------|
| development | ^1.9.4 | master |
| stable | ^1.8.1 | master |
Usage
Script by default works nicely with Twitter Bootstrap 3, but you can customize the options to fit your exact needs.
$3
Script can be used in standard way described bellow or as ES6 module.
First you need to import module and link it to the window context like this:
`js
import LiveFormValidation from 'live-form-validation-es6';
window.LiveForm = LiveFormValidation.LiveForm;
window.Nette = LiveFormValidation.Nette;
`
or
`js
const liveFormValidation = require('live-form-validation-es6');
window.LiveForm = liveFormValidation.LiveForm;
window.Nette = liveFormValidation.Nette;
`
Then you need to run initialization of validation when DOM is ready. For example:
`js
document.addEventListener('DOMContentLoaded', () => {
window.Nette.init();
});
`
or with jQuery
`js
$(() => {
window.Nette.init();
});
`
$3
You can change default options by calling LiveForm.setOptions({ ... }); after including the script. Give only options that you want to change. For example:
`js
`
Alternatively, if you want to set options before the script is loaded, create LiveFormOptions = { ... }; with options that you want to change. For example:
`js
`
$3
Option | Description
------ | -----------
showMessageClassOnParent | CSS class of control's parent where error/valid class should be added; or "false" to use control directly
messageParentClass | CSS class of control's parent where error/valid message should be added (fallback to direct parent if not found); or "false" to use control's direct parent
controlErrorClass | CSS class for an invalid control
controlValidClass | CSS class for a valid control
messageErrorClass | CSS class for an error message
enableHiddenMessageClass | control with this CSS class will show error/valid message even when control itself is hidden (useful for controls which are hidden and wrapped into special component)
disableLiveValidationClass | control with this CSS class will have disabled live validation
disableShowValidClass | control with this CSS class will not show valid message
messageTag | tag that will hold the error/valid message
messageIdPostfix | message element id = control id + this postfix
messageErrorPrefix | show this html before error message itself
showAllErrors | show all errors when submitting form; or use "false" to show only first error
showValid | show message when valid
wait | delay in ms before validating on keyup/keydown; or use "false" to disable it
focusScreenOffsetY | vertical screen offset in px to scroll after focusing element with error (useful when using fixed navbar menu which may otherwise obscure the element in focus); or use "false" for default behavior
#### Special features
* Form on load validation - Adding class validate-on-load to form element will execute its validation immediately after page is loaded.
$3
You can edit/replace methods LiveForm.addError (shows error message), LiveForm.removeError (hides error message), LiveForm.showValid (show message if input is correctly filled), LiveForm.setupHandlers` (sets handlers up for inputs, like focus, blur, onkeyup). These methods can be altered to support some JS framework, ie. jQuery.
|
Milan Felix Šulc |
|
Robert Pösel |
Zakrava |
Radek Ježdík |
Martin Vseticka |
David Grudl |