Validation fixes and some code cleanup

- Fixes in validation logic - Updated Readme docs and changelog - Updated demo
MightyMedia · Oct 22, 2021 · da5cf33 · da5cf33
1 parent 30b19d5
commit da5cf33
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,7 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [Unreleased]
 
 ### Added
-- Validation on keyUp event (as already documented)
+- Add input validation on keyUp event (as already documented)
+- Add option for full form validation on submit
 
 ### Changed
 - Optimized some small code sections

diff --git a/README.md b/README.md
@@ -38,7 +38,7 @@ Options for the entire form can be set by adding a data-attribute `data-validato
 
 __Example:__
 ```HTML
-<form type="text" name="input1" data-validator-options='{"initialRun": true, "debug": true, "classes": {"passed": "is_valid", "failed": "is_error"}, "parentSelector": "form__group"}'>
+<form type="text" name="input1" data-validator-options='{"initialRun": true, "debug": true, "classes": {"passed": "is_valid", "failed": "is_error"}, "formClasses": {"passed": "form_is_valid", "failed": "form_is_failed"}, "parentSelector": "form__group"}'>
 ...
 </form>
 ```
@@ -48,7 +48,9 @@ The following options are available:
 | Option | Description |
 | ----- | ------------ |
 | __initialRun__ | Validate the form on page-load. |
-| __classes__ | Set custom CSS classes to add to a form when it is valid or invalid is. Default are `validation-passed` and `validation-failed`. |
+| __validateSubmission__ | Validate the form on submit and prevent submit when invalid. |
+| __classes__ | Set custom CSS classes to add to a form input (parent) when it is valid or invalid is. Default are `validation-passed` and `validation-failed`. |
+| __formClasses__ | Set custom CSS classes to add to the form when the full form is validated valid or invalid. Default are `validation-passed` and `validation-failed`. |
 | __parentSelector__ | By default the validation classes (valid or invalid) are placed on the direct parent of the validated form field. With this option you can supply a selector to apply the classes to the closest parent matching the selector. |
 | __debug__ | Enable debug-mode. When enabled, the console.log() is filled with debug info. |
 
@@ -77,7 +79,7 @@ Non-validator-specific form field options:
 | Option | Description |
 | ----- | ------------ |
 | __validatorTrigger__ | The ID of the field that gets revalidated when the current field changes. |
-| _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). |
+| __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). |
 
 ---
 

diff --git a/demo/index.html b/demo/index.html
@@ -14,9 +14,9 @@ <h1>Mighty Form Validator  Demos</h1>
 
     <section class="demo">
 
-        <h2>Demo 1: Required fields</h2>
+        <h2>Demo 1: Required fields & validate on form submission</h2>
 
-        <form class="form mfvForm" method="post" data-validator-options='{"initialRun": false, "debug": false}'>
+        <form class="form mfvForm" method="post" data-validator-options='{"initialRun": false, "debug": false, "validateSubmission": true}'>
             <div class="form__group">
                 <label>Name: </label>
                 <input class="mfvField" type="text" name="demo1[name]" value="" data-validators="notempty" data-errormessage="This is a required field">
@@ -43,6 +43,12 @@ <h2>Demo 1: Required fields</h2>
 				<input class="mfvField" type="radio" name="demo1[radio]" value="option 2" data-validators="notempty" data-errormessage="This is a required field">
             </div>
             -->
+
+            <br/><br/>
+
+            <div class="form__group">
+                <button type="submit">Verzenden</button>
+            </div>
         </form>
         <br>
 
@@ -53,7 +59,7 @@ <h2>Demo 1: Required fields</h2>
 
         <h2>Demo 2: E-mail validation</h2>
 
-        <form class="form mfvForm" method="post" data-validator-options='{"initialRun": false, "debug": false}'>
+        <form id="formDemoEmail" class="form mfvForm" method="post" data-validator-options='{"initialRun": false, "debug": false, "validateSubmission": true}'>
             <div class="form__group">
                 <label>E-mail validator and a required field: </label>
                 <input class="mfvField" type="text" name="demo2[email1]" value="" data-validators="notempty,email" data-errormessage="Not a valid email address">
@@ -62,6 +68,12 @@ <h2>Demo 2: E-mail validation</h2>
                 <label>E-mail validator and not a required field: </label>
                 <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>
+
+            <br/><br/>
+
+            <div class="form__group">
+                <button type="submit">Verzenden</button>
+            </div>
         </form>
         <br>
 
@@ -72,7 +84,7 @@ <h2>Demo 2: E-mail validation</h2>
 
         <h2>Demo 3: Equals validator</h2>
 
-        <form class="form mfvForm" method="post" data-validator-options='{"initialRun": false, "debug": false}'>
+        <form class="form mfvForm" method="post" data-validator-options='{"initialRun": false, "debug": false, "validateSubmission": true}'>
             <div class="form__group">
                 <label>Field 1 (required): </label>
                 <input id="demo3_field1" class="mfvField" data-validators="notempty" type="text" name="demo3[field1]" value="">
@@ -82,6 +94,12 @@ <h2>Demo 3: Equals validator</h2>
                 <label>Field 2 (must be the same as Field 1): </label>
                 <input id="demo3_field2" class="mfvField" data-validators="notempty,equals" data-validator-options='{"equals": {"compareElement": "#demo3_field1"}}' type="text" name="demo3[field2]" value="">
             </div>
+
+            <br/><br/>
+
+            <div class="form__group">
+                <button type="submit">Verzenden</button>
+            </div>
         </form>
         <br>
 
@@ -92,7 +110,7 @@ <h2>Demo 3: Equals validator</h2>
 
         <h2>Full demo</h2>
 
-        <form class="form mfvForm" method="post" data-validator-options='{"initialRun": false, "parentSelector": ".formGroup", "debug": false}'>
+        <form class="form mfvForm" method="post" data-validator-options='{"initialRun": false, "parentSelector": ".formGroup", "debug": false, "validateSubmission": true}'>
             <div class="form__group formGroup">
                 <label>Name: </label>
                 <input class="mfvField" type="text" name="name" value="" data-validators="notempty" data-validator-options='{"general": {"triggerValidation": "emailfield_2"}}' data-errormessage="Niet ingevuld">
@@ -209,8 +227,8 @@ <h2>Full demo</h2>
 </div>
 
 <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>