v1.2.0

- Add optional live validation for text-like fields on keyup and select fields on change

Author: michapietsch

README.md

@@ -1,7 +1,7 @@
 # Validate.js [![Build Status](https://travis-ci.org/cferdinandi/validate.svg)](https://travis-ci.org/cferdinandi/validate)
 A lightweight form validation script that augments native HTML5 form validation elements and attributes, providing a better user experience and giving you more control.
 
-When a visitor leaves a field, Validate.js immediately validates the field and displays an error if applicable. It also validates the entire form on submit, and provides support for custom `onSubmit()` functions (for example, Ajax form submission).
+When a visitor leaves a field, Validate.js immediately validates the field and displays an error if applicable. It also validates the entire form on submit, and provides support for custom `onSubmit()` functions (for example, Ajax form submission). You can pass an option to activate live validation on fields while the visitor is still typing.
 
 [Download Validate](https://github.com/cferdinandi/validate/archive/master.zip) / [View the demo](http://cferdinandi.github.io/validate/)
 
@@ -152,6 +152,9 @@ validate.init({
 messageRangeUnderflow: 'Please select a value that is no less than {min}.', // Displayed with the `mind` attribute is used and the input value is too low
 messageGeneric: 'The value you entered for this field is invalid.', // A catchall error, displayed when the field fails validation and none of the other conditions apply
 
+// Live Validation
+useLiveValidation: false, // Update errors instantly while the visitor is typing
+
 // Form Submission
 disableSubmit: false, // If true, don't submit the form to the server (for Ajax for submission)
 onSubmit: function (form, fields) {}, // Function to run if the form successfully validates

dist/js/validate.js

@@ -1,6 +1,6 @@
 /*!
- * validate v1.1.0: A lightweight form validation script that augments native HTML5 form validation elements and attributes.
- * (c) 2017 Chris Ferdinandi
+ * validate v1.2.0: A lightweight form validation script that augments native HTML5 form validation elements and attributes.
+ * (c) 2018 Chris Ferdinandi
  * MIT License
  * http://github.com/cferdinandi/validate
  */
@@ -48,6 +48,9 @@
 messageRangeUnderflow: 'Please select a value that is no less than {min}.',
 messageGeneric: 'The value you entered for this field is invalid.',
 
+// Live Validation
+useLiveValidation: false,
+
 // Form Submission
 disableSubmit: false,
 onSubmit: function () {},
@@ -406,6 +409,63 @@
 
 };
 
+/**
+ * Check text field validity when typing
+ * @private
+ * @param {Event} event The keyup event
+ */
+var keyupHandler = function (event) {
+
+// Only run if the field is in a form to be validated
+if (!event.target.form || !event.target.form.matches(settings.selector)) return;
+
+// Only run if the field is some kind of text field
+var type = event.target.getAttribute('type');
+var textLikeInputs = ['text', 'email', 'url', 'tel', 'number', 'password', 'search', 'date', 'time', 'datetime', 'month', 'week'];
+if (!(textLikeInputs.indexOf(type) > -1 || event.target.nodeName === 'TEXTAREA')) return;
+
+// Validate the field
+var error = validate.hasError(event.target);
+
+// If there's an error, show it
+if (error) {
+validate.showError(event.target, error);
+return;
+}
+
+// Otherwise, remove any errors that exist
+validate.removeError(event.target);
+
+};
+
+/**
+ * Check select field validity on change
+ * @private
+ * @param {Event} event The change event
+ */
+var changeHandler = function (event) {
+
+// Only run if the field is in a form to be validated
+if (!event.target.form || !event.target.form.matches(settings.selector)) return;
+
+// Only run if the field is a select
+var type = event.target.getAttribute('type');
+if (!(event.target.nodeName === 'SELECT')) return;
+
+// Validate the field
+var error = validate.hasError(event.target);
+
+// If there's an error, show it
+if (error) {
+validate.showError(event.target, error);
+return;
+}
+
+// Otherwise, remove any errors that exist
+validate.removeError(event.target);
+
+};
+
 /**
  * Check all fields on submit
  * @private
@@ -462,6 +522,11 @@
 document.removeEventListener('click', clickHandler, true);
 document.removeEventListener('submit', submitHandler, false);
 
+if (settings.useLiveValidation) {
+document.removeEventListener('change', changeHandler, true);
+document.removeEventListener('keyup', keyupHandler, true);
+}
+
 // Remove all errors
 var fields = document.querySelectorAll(settings.errorClass);
 for (var i = 0; i < fields.length; i++) {
@@ -500,6 +565,11 @@
 document.addEventListener('click', clickHandler, true);
 document.addEventListener('submit', submitHandler, false);
 
+if (settings.useLiveValidation) {
+document.addEventListener('change', changeHandler, true);
+document.addEventListener('keyup', keyupHandler, true);
+}
+
 };
 
 

dist/js/validate.min.js

@@ -1,6 +1,6 @@
 /*!
- * validate v1.1.0: A lightweight form validation script that augments native HTML5 form validation elements and attributes.
- * (c) 2017 Chris Ferdinandi
+ * validate v1.2.0: A lightweight form validation script that augments native HTML5 form validation elements and attributes.
+ * (c) 2018 Chris Ferdinandi
  * MIT License
  * http://github.com/cferdinandi/validate
  */