reset script

views/reset.pug

@@ -59,19 +59,32 @@ html(lang="en")
     script(src="/account/js/generalFunction.js")
     script(src="/js/headfoot.js")
     script.
-        // check input fields
-        'use strict';
-        window.addEventListener('load', function() {
-            // Fetch all the forms we want to apply custom Bootstrap validation styles to
-            var forms = document.getElementsByClassName('needs-validation');
-            // Loop over them and prevent submission
-            var validation = Array.prototype.filter.call(forms, function(form) {
-                form.addEventListener('submit', function(event) {
-                    if (form.checkValidity() === false) {
-                        event.preventDefault();
-                        event.stopPropagation();
-                    }
-                    form.classList.add('was-validated');
-                }, false);
-            });
-        }, false);
+        $('#inputNewPwd, #inputConfirm').on('keyup', function () {
+            var isBest = false;
+            var isMatch = false;
+
+            // password best practice
+            if ($('#inputNewPwd').val().length < 8) {
+                $('#recommendation').html('Must be at least 8 characters').css('color', 'red');
+                isBest = false;
+            } else {
+                $('#recommendation').html('').css('color', 'red');
+                isBest = true;
+            }
+            // match or not?
+            if ($('#inputNewPwd').val() == $('#inputConfirm').val()) {
+                $('#message').html('Matching').css('color', 'green');
+                isMatch = true;
+            } else {
+                $('#message').html('Not Matching').css('color', 'red');
+                isMatch = false;
+            }
+    
+        // enable/disable update button
+        if (isBest && isMatch) {
+            $('#updateBtn').prop('disabled', false);
+        } else {
+            $('#updateBtn').prop('disabled', true);
+        }
+    });
+