live-form-validation-es6 v1.9.4

Live Form Validation ES6

This is modified version of Live Form Validation for usage in ES6 syntax as module.

:no_entry: Nice client-side live form validation for Nette Forms 2.4.

Discussion / Help

Install

NPM

npm install --save live-form-validation

Manually

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.

Rawgit

• 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

Usage

Script by default works nicely with Twitter Bootstrap 3, but you can customize the options to fit your exact needs.

ES6 usage

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:

import LiveFormValidation from 'live-form-validation-es6';

window.LiveForm = LiveFormValidation.LiveForm;
window.Nette = LiveFormValidation.Nette;

or

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:

document.addEventListener('DOMContentLoaded', () => {
   window.Nette.init(); 
});

or with jQuery

$(() => {
   window.Nette.init();  
});

Options

You can change default options by calling LiveForm.setOptions({ ... }); after including the script. Give only options that you want to change. For example:

<script src="/js/live-form-validation.js"></script> 
<script>
	LiveForm.setOptions({
		messageErrorPrefix: 'Error: ',
		wait: 500
	});
</script> 

Alternatively, if you want to set options before the script is loaded, create LiveFormOptions = { ... }; with options that you want to change. For example:

<script>
	LiveFormOptions = {
		messageErrorPrefix: 'Error: ',
		wait: 500
	};
</script> 
<script src="/js/live-form-validation.js"></script> 

Available options

Special features

• Form on load validation - Adding class validate-on-load to form element will execute its validation immediately after page is loaded.

Advanced

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.

Maintainers

Authors

This script is based on work of Robert Pösel, zakrava, Radek Ježdík, MartyIX and David Grudl.

Thank you all!

Thank you for testing, reporting and contributing.