Ytukyg

I'm trying to activate validation by Bootstrap and I've pasted in the follownig 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" />

Trying to googlearch the issue, I only arrive at examples linking to the official site from where I've got my sample, so there is rather little to help me there. I have a fiddle illustrating the issue.

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

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://www.codeply.com/go/45rU7UOhFo

Update 2018 - Bootstrap 4.0.0
Form Validation Example Demo

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.