Can't make the validation work in Bootstrap

Question

I'm trying to implement validation by Bootstrap and I've pasted the following sample on my page:

<div class="form-group has-success">
  <label class="form-control-label" for="inputSuccess1">Input with success</label>
  <input type="text" class="form-control form-control-success" id="inputSuccess1">
  <div class="form-control-feedback">Success! You've done it.</div>
  <small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>

I can see that the appearance of the input control has changed (it's a bit rounded and much more aesthetic now) but it still doesn't show the green border as can be seen on the page linked to. The Bootstrap I'm linking to is pointed out as follows.

<link rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" />

I have tried to google for this issue but to no avail. I have a fiddle illustrating the issue.

What can I do about it? What am I missing?

Solution 1

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>

Solution 2

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.