diff --git a/views/reset.pug b/views/reset.pug index b245b94978b8d0888d0b88e480a28968c5620437..42d23f06fafbadf7a5229163e107909a5aa0272b 100644 --- a/views/reset.pug +++ b/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); + } + }); +