Add validation on keyUp

CHANGELOG.md

@@ -6,6 +6,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 
+## [Unreleased]
+
+### Added
+- Validation on keyUp event (as already documented)
+
+### Changed
+- Optimized some small code sections
+
+
 ## [0.2.3] - 2010-10-18
 
 ### Changed

README.md

@@ -77,7 +77,7 @@ Non-validator-specific form field options:
 | Option | Description |
 | ----- | ------------ |
 | __validatorTrigger__ | The ID of the field that gets revalidated when the current field changes. |
-| _keyUp_ | __Not available yet__ Trigger field validation on the key up event, possible values: `0` (no, default), `1` (only show if field is valid), `2` (show if field is valid or invalid). |
+| _keyUp_ | Trigger field validation on the key up event, possible values: `0` (no, default), `1` (only show if field is valid), `2` (show if field is valid or invalid). |
 
 ---
 

demo/assets/scss/molecules/_form.scss

@@ -38,6 +38,10 @@
         }
 
         &.validation-failed {
+			label {
+				color: #ff0000;
+			}
+
             input {
                 border-color: #ff0000;
             }

demo/index.html

@@ -25,6 +25,10 @@ <h2>Demo 1: Required fields</h2>
                 <label>An other field: </label>
                 <input class="mfvField" type="text" name="demo1[other_field]" value="" data-validators="notempty" data-errormessage="This is a required field">
             </div>
+            <div class="form__group">
+                <label>KeyUp field: </label>
+                <input class="mfvField" type="text" name="demo1[keyup_field]" value="" data-validators="notempty" data-validator-options='{"general": {"keyUp": 2}}'  data-errormessage="This is a required field">
+            </div>
             <div class="form__group form__group--checkbox">
                 <input id="requiredCheckboxField" class="mfvField" type="checkbox" name="demo1[checkbox]" value="checkbox" data-validators="notempty" data-errormessage="This is a required field">
                 <label for="requiredCheckboxField">A required checkbox:</label>
@@ -56,7 +60,7 @@ <h2>Demo 2: E-mail validation</h2>
             </div>
             <div class="form__group">
                 <label>E-mail validator and not a required field: </label>
-                <input class="mfvField" type="text" name="demo2[email2]" value="" data-validators="email" data-errormessage="Not a valid email address">
+                <input class="mfvField" type="text" name="demo2[email2]" value="" data-validators="email" data-validator-options='{"general": {"keyUp": 1}}' data-errormessage="Not a valid email address">
             </div>
         </form>
         <br>
@@ -101,7 +105,7 @@ <h2>Full demo</h2>
 
             <div class="form__group">
                 <label>Email: </label>
-                <input id="emailfield_1" class="mfvField" type="text" name="email" value="" data-validators="email" data-errormessage="Geen geldig e-mailadres">
+                <input id="emailfield_1" class="mfvField" type="text" name="email" value="" data-validators="email" data-validator-options='{"general": {"keyUp": 1}}' data-errormessage="Geen geldig e-mailadres">
             </div>
 
             <div class="form__group">
@@ -204,16 +208,16 @@ <h2>Full demo</h2>
 
 </div>
 
-<script src="../dist/mightyFormValidator.full.min.js"></script>
+<!-- <script src="../dist/mightyFormValidator.full.min.js"></script> -->
 
-<!-- <script src="../src/js/mightyFormValidator.js"></script>
+<script src="../src/js/mightyFormValidator.js"></script>
 <script src="../src/js/validators/email.js"></script>
 <script src="../src/js/validators/number.js"></script>
 <script src="../src/js/validators/length.js"></script>
 <script src="../src/js/validators/date.js"></script>
 <script src="../src/js/validators/regex.js"></script>
 <script src="../src/js/validators/equals.js"></script>
-<script src="../src/js/validators/zipcode.js"></script> -->
+<script src="../src/js/validators/zipcode.js"></script>
 
 </body>
 </html>