Can't make the validation work in Bootstrap

Question

Bootstrap 5 (Update 2021)

Since jQuery is no longer required for Bootstrap 5, it's easy to do client-side validation with vanilla JavaScript. The docs include a generic code example that should work on all forms with needs-validation..

(function () {
    'use strict'

    // Fetch all the forms we want to apply custom Bootstrap validation styles to
    var forms = document.querySelectorAll('.needs-validation')

    // Loop over them and prevent submission
    Array.prototype.slice.call(forms)
        .forEach(function (form) {
        form.addEventListener('submit', function (event) {
            if (!form.checkValidity()) {
            event.preventDefault()
            event.stopPropagation()
            }

            form.classList.add('was-validated')
        }, false)
        })
})()

Bootstrap 5 Form Validation Demo

Bootstrap 4 (Original Answer)

Validation has changed as of the Bootstrap 4 beta release.

The valid state selectors use the was-validated class which would be added dynamically after validating the form via client-side JavaScript. For example...

<form class="container was-validated" novalidate="">
    <div class="form-group">
        <label class="form-control-label" for="inputSuccess1">Input with success</label>
        <input type="text" class="form-control" name="i1" id="inputSuccess1">
        <div class="valid-feedback">Success! You've done it.</div>
    </div>
    <div class="form-group">
        <label class="form-control-label" for="inputSuccess2">Input with danger</label>
        <input type="text" class="form-control" name="i2" required="" id="inputSuccess2">
        <div class="invalid-feedback">That didn't work.</div>
    </div>
    <div class="">
        <button type="submit" class="btn btn-secondary">Text</button>
    </div>
</form>

https://codeply.com/go/45rU7UOhFo

Form Validation Example Demo - Bootstrap 4.0.0

---

As explained in the docs, if you intend to use server-side validation you can simply set the is-valid or is-invalid classes on the form-controls...

<form class="container">
    <div class="form-group">
        <label class="form-control-label" for="inputSuccess1">Input with success</label>
        <input type="text" class="form-control is-valid" id="inputSuccess1">
        <div class="valid-feedback">Success! You've done it.</div>
    </div>
</form>

It appears the validation changes again in the final release version of Bootstrap 4: http://getbootstrap.com/docs/4.0/components/forms/#validation.

It becomes more complicated than I thought.

Custom style client side validation is recommended:

1. When validated, the form adds a class named was-validated.
2. Feedback messages are wrapped within .valid-feedback or .invalid-feedback.

For server-side validation:

1. No need for was-validated class on the <form> tag.
2. Add .is-valid or .is-invalid on the input control.
3. Add .invalid-feedback or .valid-feedback for the feedback message.