upd 4.2.6

CHANGELOG.md

@@ -1,3 +1,11 @@
+### 4.2.6
++ [x] Validator: add func `reset` for reset fields state
++ [x] Validator: add func `reset_state` for reset field state
++ [x] Validator: add func `set_valid_state` for valid field state
++ [x] Validator: add func `set_invalid_state` for invalid field state
++ [x] Validator: add auto method `reset` for forms with role `validator`
++ [x] Validator: add option boolean `requiredMode` for form. If this option is `true`, all funcs works as `required`, else funcs works if field value is not empty.
+
 ### 4.2.5
 + [x] CSS Utilities: add `cursor` classes in format `.c-{cursor-name}`. Example: `.c-alias`
 + [x] Badge: added class `.badge` to display counting info or small label inside the element

TODO.md

@@ -1,4 +1,4 @@
-####4.1.x
+### 4.x
 - [ ] Remove jQuery dependency 
 - [ ] Dropdown not only display: block
 - [ ] Calendar picker calendar as dialog on phones
@@ -10,6 +10,4 @@
 - [ ] Keypad: extends positions to all
 - [ ] Set value for inputs components with value attribute
 - [ ] Add media state for horizontal menu
-
-####4.x
 - [ ] Layout manager ?

build/css/metro-all.css

@@ -1,5 +1,5 @@
 /*
- * Metro 4 Components Library v4.2.5 build 679 (https://metroui.org.ua)
+ * Metro 4 Components Library v4.2.5 build @@build (https://metroui.org.ua)
  * Copyright 2018 Sergey Pimenov
  * Licensed under MIT
  */
@@ -19168,6 +19168,11 @@ form {
   display: block;
   position: relative;
 }
+.form-actions {
+  margin: 10px 0;
+  display: block;
+  position: relative;
+}
 input[type=text],
 input[type=password],
 input[type=tel],

build/css/metro-colors.css

@@ -1,5 +1,5 @@
 /*
- * Metro 4 Components Library v4.2.5 build 679 (https://metroui.org.ua)
+ * Metro 4 Components Library v4.2.5 build @@build (https://metroui.org.ua)
  * Copyright 2018 Sergey Pimenov
  * Licensed under MIT
  */

build/css/metro-icons.css

@@ -1,5 +1,5 @@
 /*
- * Metro 4 Components Library v4.2.5 build 679 (https://metroui.org.ua)
+ * Metro 4 Components Library v4.2.5 build @@build (https://metroui.org.ua)
  * Copyright 2018 Sergey Pimenov
  * Licensed under MIT
  */

build/css/metro-rtl.css

@@ -1,5 +1,5 @@
 /*
- * Metro 4 Components Library v4.2.5 build 679 (https://metroui.org.ua)
+ * Metro 4 Components Library v4.2.5 build @@build (https://metroui.org.ua)
  * Copyright 2018 Sergey Pimenov
  * Licensed under MIT
  */

build/css/metro.css

@@ -1,5 +1,5 @@
 /*
- * Metro 4 Components Library v4.2.5 build 679 (https://metroui.org.ua)
+ * Metro 4 Components Library v4.2.5 build @@build (https://metroui.org.ua)
  * Copyright 2018 Sergey Pimenov
  * Licensed under MIT
  */
@@ -19168,6 +19168,11 @@ form {
   display: block;
   position: relative;
 }
+.form-actions {
+  margin: 10px 0;
+  display: block;
+  position: relative;
+}
 input[type=text],
 input[type=password],
 input[type=tel],

build/js/metro.js

@@ -1,5 +1,5 @@
 /*
- * Metro 4 Components Library v4.2.5 build 679 (https://metroui.org.ua)
+ * Metro 4 Components Library v4.2.5 build @@build (https://metroui.org.ua)
  * Copyright 2018 Sergey Pimenov
  * Licensed under MIT
  */
@@ -80,7 +80,7 @@ var isTouch = (('ontouchstart' in window) || (navigator.MaxTouchPoints > 0) || (
 
 var Metro = {
 
-    version: "4.2.5.679 ",
+    version: "@@version.@@build @@status",
     isTouchable: isTouch,
     fullScreenEnabled: document.fullscreenEnabled,
     sheet: null,
@@ -15396,22 +15396,65 @@ var ValidatorFuncs = {
             ;
     },
 
-    validate: function(el, result, cb_ok, cb_error){
+    reset_state: function(el){
+        var input = Utils.isJQueryObject(el) === false ? $(el) : el ;
+        var is_control = ValidatorFuncs.is_control(input);
+
+        if (is_control) {
+            input.parent().removeClass("invalid valid");
+        } else {
+            input.removeClass("invalid valid");
+        }
+    },
+
+    set_valid_state: function(input){
+        if (Utils.isJQueryObject(input) === false) {
+            input = $(input);
+        }
+        var is_control = ValidatorFuncs.is_control(input);
+
+        if (is_control) {
+            input.parent().addClass("valid");
+        } else {
+            input.addClass("valid");
+        }
+    },
+
+    set_invalid_state: function(input){
+        if (Utils.isJQueryObject(input) === false) {
+            input = $(input);
+        }
+        var is_control = ValidatorFuncs.is_control(input);
+
+        if (is_control) {
+            input.parent().addClass("invalid");
+        } else {
+            input.addClass("invalid");
+        }
+    },
+
+    reset: function(form){
+        var that = this;
+        $.each($(form).find("[data-validate]"), function(){
+            that.reset_state(this);
+        });
+
+        return this;
+    },
+
+    validate: function(el, result, cb_ok, cb_error, required_mode){
         var this_result = true;
         var input = $(el);
-        var control = ValidatorFuncs.is_control(input);
+        var is_control = ValidatorFuncs.is_control(input);
         var funcs = input.data('validate') !== undefined ? String(input.data('validate')).split(" ").map(function(s){return s.trim();}) : [];
         var errors = [];
+        var required = funcs.indexOf('required') !== -1;
 
         if (funcs.length === 0) {
             return true;
         }
 
-        if (control) {
-            input.parent().removeClass("invalid valid");
-        } else {
-            input.removeClass("invalid valid");
-        }
+        this.reset_state(input);
 
         if (input.attr('type') && input.attr('type').toLowerCase() === "checkbox") {
             if (funcs.indexOf('required') === -1) {
@@ -15454,7 +15497,16 @@ var ValidatorFuncs = {
                 if (Utils.isFunc(ValidatorFuncs[f]) === false)  {
                     this_result = true;
                 } else {
-                    this_result = ValidatorFuncs[f](input.val(), a);
+                    if (required_mode === true || f === "required") {
+                        this_result = ValidatorFuncs[f](input.val(), a);
+                    } else {
+                        if (input.val().trim() !== "") {
+                            this_result = ValidatorFuncs[f](input.val(), a);
+                        } else {
+                            this_result = true;
+                        }
+                    }
+                    // this_result = ValidatorFuncs[f](input.val(), a);
                 }
 
                 if (this_result === false) {
@@ -15468,11 +15520,7 @@ var ValidatorFuncs = {
         }
 
         if (this_result === false) {
-            if (control) {
-                input.parent().addClass("invalid")
-            } else {
-                input.addClass("invalid")
-            }
+            this.set_invalid_state(input);
 
             if (result !== undefined) {
                 result.log.push({
@@ -15487,11 +15535,7 @@ var ValidatorFuncs = {
             if (cb_error !== undefined) Utils.exec(cb_error, [input, input.val()], input[0]);
 
         } else {
-            if (control) {
-                input.parent().addClass("valid")
-            } else {
-                input.addClass("valid")
-            }
+            this.set_valid_state(input);
 
             if (cb_ok !== undefined) Utils.exec(cb_ok, [input, input.val()], input[0]);
         }
@@ -15508,6 +15552,7 @@ var Validator = {
         this.elem  = elem;
         this.element = $(elem);
         this._onsubmit = null;
+        this._onreset = null;
         this._action = null;
         this.result = [];
 
@@ -15523,6 +15568,7 @@ var Validator = {
         submitTimeout: 200,
         interactiveCheck: false,
         clearInvalid: 0,
+        requiredMode: true,
         onBeforeSubmit: Metro.noop_true,
         onSubmit: Metro.noop,
         onError: Metro.noop,
@@ -15569,25 +15615,40 @@ var Validator = {
             }
             if (o.interactiveCheck === true) {
                 input.on(Metro.events.inputchange, function () {
-                    ValidatorFuncs.validate(this);
+                    ValidatorFuncs.validate(this, undefined, undefined, undefined, o.requiredMode);
                 });
             }
         });
 
         this._onsubmit = null;
+        this._onreset = null;
 
         if (element[0].onsubmit !== null) {
             this._onsubmit = element[0].onsubmit;
             element[0].onsubmit = null;
         }
 
+        if (element[0].onreset !== null) {
+            this._onreset = element[0].onreset;
+            element[0].onreset = null;
+        }
+
         element[0].onsubmit = function(){
             return that._submit();
         };
 
+        element[0].onreset = function(){
+            return that._reset();
+        };
+
         Utils.exec(this.options.onValidatorCreate, [element], this.elem);
     },
 
+    _reset: function(){
+        ValidatorFuncs.reset(this.element);
+        if (this._onsubmit !==  null) Utils.exec(this._onsubmit, null, this.element[0]);
+    },
+
     _submit: function(){
         var that = this, element = this.element, o = this.options;
         var form = this.elem;
@@ -15599,7 +15660,7 @@ var Validator = {
         };
 
         $.each(inputs, function(){
-            ValidatorFuncs.validate(this, result, o.onValidate, o.onError);
+            ValidatorFuncs.validate(this, result, o.onValidate, o.onError, o.requiredMode);
         });
 
         submit.removeAttr("disabled").removeClass("disabled");

docs/examples/test.html

@@ -34,15 +34,30 @@
 </head>
 <body>
 <div class="container">
-    <h1 data-role="counter" data-value="5603" data-step="10" data-delay="5"></h1>
+    <form data-role="validator" action="javascript:" class="m-20">
+        <input type="text" data-validate="email">
+        <div class="form-actions">
+            <button class="button" type="submit">Submit</button>
+            <button class="button" type="reset">Reset</button>
+        </div>
+    </form>
+    <form data-role="validator" data-required-mode="false" action="javascript:" class="m-20">
+        <input type="text" data-validate="email">
+        <div class="form-actions">
+            <button class="button" type="submit">Submit</button>
+            <button class="button" type="reset">Reset</button>
+        </div>
+    </form>
+    <form data-role="validator" data-required-mode="false" action="javascript:" class="m-20">
+        <input type="text" data-validate="required email">
+        <div class="form-actions">
+            <button class="button" type="submit">Submit</button>
+            <button class="button" type="reset">Reset</button>
+        </div>
+    </form>
 </div>
 <script src="../js/jquery-3.3.1.min.js"></script>
 <script src="../metro/js/metro.js"></script>
-<script>
-    setTimeout(function () {
-        $("h1").data("counter").start();
-    }, 0);
-</script>
 <!-- ads-script -->
 
 </body>

docs/metro/css/metro-all.css

@@ -19168,6 +19168,11 @@ form {
   display: block;
   position: relative;
 }
+.form-actions {
+  margin: 10px 0;
+  display: block;
+  position: relative;
+}
 input[type=text],
 input[type=password],
 input[type=tel],

docs/metro/css/metro.css

@@ -19168,6 +19168,11 @@ form {
   display: block;
   position: relative;
 }
+.form-actions {
+  margin: 10px 0;
+  display: block;
+  position: relative;
+}
 input[type=text],
 input[type=password],
 input[type=tel],