Bootstrap 4 form validation: Add same rule for password comparison

Question

I use Bootstrap 4 / JS form validation (https://getbootstrap.com/docs/4.0/components/forms/#custom-styles) which works as intended.

I am trying to add the same formatting and submission rules for a comparison of the two password fields, password ('#pw') and repeat password ('#pwRepeat'), so that it shows the green cell border and checkmark icon when they match and the red cell border and error icon when they don't match.

My problem is that I can't get it to trigger the invalid format resp. to set it manually to invalid when the passwords don't match (for corresponding lines see comments below).

Can someone show me how to do this right and also provide a short explanation ?

My JS:

(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 show 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 where found
                if((pwRepeat == pw) && (form.checkValidity() === true)) {
                    // do stuff
                }

            }, false);
        });
    },
    false);
})();

Many thanks in advance,
Tim

Please use <> tool for create a complete snippet

Simone Rossaini
– Simone Rossaini

2021-03-02 10:12:03 +00:00
Commented Mar 2, 2021 at 10:12 — Simone Rossaini
– Simone Rossaini, Commented Mar 2, 2021 at 10:12

John · Accepted Answer · 2021-03-02 10:33:22Z

1

Couple of issues here.

var pwRepeat = document.getElementById('pwRepeat').value;

pwRepeat is a value and not an element so the following wouldn't work and addClass isn't correct either.

pwRepeat.addClass('invalid');

Replace the above with:

 document.getElementById('pwRepeat').classList.add("invalid");

Given there is no working example the above is untested but should point you in the right direction as to why this currently doesn't work.

answered Mar 2, 2021 at 10:33

John

3,8052 gold badges21 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

keewee279 Over a year ago

Thanks a lot for this. I mixed JS and jQuery here and was too fast in typing this. I will try to create a working example to find out why the colors are still not being set.

John Over a year ago

Probably .invalid css border colour isn't overriding the existing border colour. Trying adding !important to it. like .invalid { border : solid 1px red !important;} Failing that, post the CSS and the HTML.

keewee279 Over a year ago

Thank you. I realised that the required default classes are called is-invalid / is-valid and not invalid / valid. Changing this seems to work with the borders and icons.

Collectives™ on Stack Overflow

Bootstrap 4 form validation: Add same rule for password comparison

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related