Live Form Validation

Nice client-side live form validation for Nette Forms 3.0.

Build Status Licence Downloads total Latest stable

Discussion / Help

Join the chat


State Version Branch
development dev-master master
stable ^1.9.0 master



npm install --save live-form-validation


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.


  • Dev:
  • Stable:


  • Nette 3.0:
  • Nette 2.4:


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


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> 
		messageErrorPrefix: 'Error: ',
		wait: 500

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

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

Available options

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.


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


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

Thank you all!

Robert Pösel


Radek Ježdík

Martin Vseticka

David Grudl

Thank you for testing, reporting and contributing.

  • v1.9.0 v1.9.0

    Bump! 🏭

    Diff: v1.8.0...v1.9.0


    • moved under contributte organization
    • created NPM package [#35]
    • added Travis CI releases
    • fixed ReferenceError prop is not defined
    • fixed range validator for min & max validator [#38]
  • v1.8.1 v1.8.1

    Bump! 😂

    Fixed CheckboxList and allow pre-set options

    Diff: v1.8.0...v1.8.1


    • Allow setting options before script is loaded
    • Fix validation of CheckboxList
  • v1.8.0 v1.8.0

    Bump! 🍂

    Updated for Nette Forms 2.4

    Diff: v1.7.0...v1.8.0


    • Updated internal netteForms.js code to latest version.
    • Generate nicer ID for some multi-element's message
  • v1.7.0 v1.7.0

    Bump! 🏭

    Finally validating multi elements

    Diff: v1.6.2...v1.7.0


    • Implement correct handling of multi elements (e.g. CheckBoxList, RadioList)
    • Update netteForms.js code to latest master version
  • v1.6.2 v1.6.2

    Bump! 🌫

    New option for message parent

    Diff: v1.6.1...v1.6.2


    • Added new option 'messageParentClass' to put message into specific parent (not direct one)
  • v1.6.0 v1.6.0

    Bump! 🤕

    Compatibility and special error cases improvements

    Diff: v1.5.0...v1.6.0


    • Support for validating forms that weren't initialized properly (compatibility with Grido)
    • Support form elements with none or duplicit id
    • Small other fixes and changes
  • v1.6.1 v1.6.1

    Bump! 🗡

    Useful improvements

    Diff: v1.6.0...v1.6.1


    • More convenient way for changing options
    • Fix compatibility with Grido
  • v1.5.0 v1.5.0

    Bump! 🥅

    On-load validation, better processing server-errors, various fixes

    Diff: v1.4.1...v1.5.0


    • Don't append error message to radio/checkbox input's label, but along label
    • Fix order of showing error message and focusing element
    • Rework processing server-validation errors
    • Support for on-load validation
    • Add new special class "enableHiddenMessageClass"
    • Code and options cleanup (renamed various options names)
    • Add bower.json
    • Various other fixes
  • v1.4.1 v1.4.1

    Bump! 🅰️

    Fix removing errors created by server-validation

    Diff: v1.4...v1.4.1


    • Fix removing errors without ID (e.g. created by server-validation)
    • Small cleanup
  • v1.4 v1.4

    Bump! 🇬🇦

    Nette Forms 2.3 update and Bootstrap 3 improvements


    • update with netteForms.js code from Nette Forms 2.3
    • use better default values for Bootstrap 3
      • add "text-danger" to errorMessageClass
      • set glyphicon icon for errorMessagePrefix
    • reformat options' comments to new lines

Is this addon outdated? Did you find an issue? Please report it.

Componette Componette