I am utilizing Bootstrap 4 / JS form validation (https://getbootstrap.com/docs/4.0/components/forms/#custom-styles) and it is functioning as expected.
Currently, I am working on implementing the same style and submission rules for comparing two password fields, namely password ('#pw') and repeat password ('#pwRepeat'), so that a green border and checkmark icon are displayed when they match, and a red border and error icon when they do not match.
The issue I am facing is in triggering the invalid format or manually setting it to invalid when the passwords do not match (refer to the comments below for corresponding lines).
Could someone guide me on the correct way to achieve this and provide a brief explanation?
My JavaScript code:
(function() {
'use strict';
window.addEventListener('load', function() {
var forms = document.getElementsByClassName('needs-validation');
var validation = Array.prototype.filter.call(forms, function (form) {
form.addEventListener('submit', function (event) {
var pw = document.getElementById('pw').value; // $('#pw').val();
var pwRepeat = document.getElementById('pwRepeat').value; // $('#pwRepeat').val();
if(pwRepeat != pw) {
// Set cell border color to red and display error icon for invalid input
pwRepeat.addClass('invalid'); // Not working
}
if(form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
// Submit if no errors were found
if((pwRepeat == pw) && (form.checkValidity() === true)) {
// Perform necessary actions
}
}, false);
});
},
false);
})();
Thank you in advance,
Tim