CODEWITHSUNDEEP
javascripthtmlbootstrap-5
Damiano Miazzi
Damiano Miazzi

Reputation: 2315

Javascript, validation of password with bootstrap

i'm trying to learn Javascript and some basic HTML with bootstrap v5.

I created a Sign-in form and now i'm try to do some validation for the required field.

I follow the Bootstrap documentations and i managed to get validation for all my input field except for the password, i want to verify if the password are the same or if they are empty field...but i'm stuck.. not familiar with javascript.

my attempt in javascript:

let forms = document.querySelectorAll(".needs-validations");
let pass1 = document.getElementById("password1");
let pass2 = document.getElementById("password2");


Array.prototype.slice.call(forms).forEach( function (form){
    form.addEventListener("submit",function (ev) {

        // test password check....
        if (pass1.value !== pass2.value || pass1.value === "" || pass2.value === "" ){
            pass1.className = 'form-control is-invalid'
            pass2.className = 'form-control is-invalid'
        }

        if (!form.checkValidity()){
            ev.preventDefault()
            ev.stopPropagation()
        }
        form.classList.add("was-validated")

    })
})

but here the result: As you can see password is always valid and i don't understand why.

pass

my html:

<body class="body">

        <div class="center">
            <h4 class="title">Sign Up New User</h4>
        <form name="signin-form" method="post" class="needs-validations" novalidate id="forms">
            <div class="container">

                <div class="row mt-3">
                    <div class="col">
                        <label for="name" class="form-label">Name</label>
                        <input type="text" class="form-control" id="name" placeholder="Name" required>
                        <div class="invalid-feedback">
                            Name can't be empty
                        </div>
                    </div>
                    <div class="col">
                        <label for="surname" class="form-label">Surname</label>
                        <input type="text" class="form-control" id="surname" placeholder="Surname" required>
                        <div class="invalid-feedback">
                            Surname can't be empty
                        </div>
                    </div>
                </div>
                <div class="row mt-3">
                    <div class="col">
                        <label for="email" class="form-label">Email</label>
                        <input type="email" class="form-control" id="email" placeholder="Email" required>
                        <div class="invalid-feedback">
                            invalid email
                        </div>
                    </div>
                    <div class="col-4 text-end">
                        <label for="email" class="form-label">Role</label>
                        <select class="form-select" id="validationCustom04" required>
                            <option selected disabled value="">Choose...</option>
                            <option>Captain</option>
                            <option>First Officer</option>
                        </select>
                        <div class="invalid-feedback">
                            Please select role
                        </div>
                    </div>
                </div>

                <div class="row mt-3 ">
                    <div class="col">
                        <label for="password1" class="form-label ">Password</label>
                        <input type="password" class="form-control" id="password1" placeholder="Password">
                    </div>
                    <div class="col">
                        <label for="password2" class="form-label ">Confirm Password</label>
                        <input type="password" class="form-control" id="password2" placeholder="Password">
                        <div class="invalid-feedback">
                            Password not match
                        </div>
                    </div>
                </div>
                <div class="row-cols-2 mt-3">
                    <button class="btn btn-primary" type="submit">Submit form</button>
                </div>
            </div>
        </form>

        </div>

        <script src="/validation.js"></script>
        <script src="/js/bootstrap.bundle.min.js" ></script>

</body>

Upvotes: 0

Views: 455

Answers (1)

fonzane
fonzane

Reputation: 440

What I don't understand is, that your password fields seem to be having a valid class in your posted screenshot. But I can't find it anywhere in your code (neither HTML nor JS).

I'd do it like this:

(Note: I didn't test this code, but it should work. If it works and you want to learn from it, I recommend to read through it step by step and apply it to your logic instead of just copy pasta.)

let form = document.querySelector("form.needs-validations");
// or, to be more specific: 
// let form = document.querySelector("form[name='signing-form']")

form.addEventListener("submit",function (ev) {
  let pass1 = document.getElementById("password1");
  let pass2 = document.getElementById("password2");

  // test password check....
  if (pass1.value !== pass2.value || pass1.value === "" || pass2.value === "" ){
    pass1.classList.add('is-invalid');
    pass2.classList.add('is-invalid');
  }

  if (!form.checkValidity()){
    ev.preventDefault();
    ev.stopPropagation();
  }
  form.classList.add("was-validated");
})

Note: the functionality to validate the content of your password-fields will only be triggered once you hit the submit button.

Upvotes: 1

Related Questions