30

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?

3 Answers 3

45

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>
5
  • hello,I'm browsingbootstrap's validation docsand I couldn´t make client-side validation work,until I noticed (inspector) there is a script in that docs page,which is the one making it work,I mean aside from the cores bootstrap.js and jquery.js,indeed when I added it to my project,it worked.Is that actually the way?do I actually need to manually add that chunk of code,cause I´m telling you,it won´t work without it,not in my project,nor in the docs.I can´t post the script here but it´s in the docs I linked,right after the form tag Oct 16, 2018 at 1:27
  • 5
    Can’t believe how hard this was to find. The docs don’t make clear at all that you need a small event handler to add the class («you may choose when to activate them (typically after form submission is attempted)»). Thanks for the answer!
    – merwok
    Feb 1, 2019 at 3:25
  • How to combine both client side and server side without having replace was-validate? Jul 18, 2020 at 15:08
  • 1
    why not give a link to the css file? May 14, 2021 at 13:24
  • 1
    @pajarnas -- what CSS file? May 14, 2021 at 13:38
17

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.
3
  • 2
    I don't think the form needs to have needs-validation class, this is just on the bootstrap doc but doesn't do anything.
    – Tonio
    Feb 15, 2018 at 15:19
  • 1
    Saying "No need for was-validated" isn't really sufficient. I'd say, "do not add was-validated if you want the server-side validation to work... You can't use both together. Either you use client-side with was-validated or you use is-invalid/is-valid by adding it from server side code. Apr 27, 2018 at 17:38
  • 2
    Note that as per example code in the document (scroll to the bottom of the code blob) the client-side Javascript needs to add the was-validated class upon form submission! Otherwise, nothing will show!
    – Jens
    Dec 14, 2018 at 6:38
0

my simple way....

<input type="text" class="form-control" id="unombre" 
placeholder="su nombre"  name="vnombre" required 
onblur="valida(this.id)">

<script>
function valida(v) {
var dato = document.getElementById(v).value
document.getElementById(v).className +=' is-valid';
}
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.