Geek Answers Handbook

Cannot validate in Bootstrap 4

I am trying to activate a check using Bootstrap , and I pasted a follownig sample in 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 see that the appearance of the input control has changed (it is a little rounded and much more aesthetic) , but it still does not show a green border, as seen on the page linked to. The Bootstrap sample I am referencing is listed as follows.

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

Trying googlearch problems, I only come to examples related to the official site, where I got my sample from, so help me a bit. I have a script illustrating the problem .

What can I do? What am I missing?

+6
2

- Bootstrap 4.

was-validated, . ...

<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

2018 - Bootstrap 4.0.0

, , is-valid is-invalid -...

<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>
+9

Bootstrap 4 .

http://getbootstrap.com/docs/4.0/components/forms/#validation

, .

.

  • was-validated
  • .valid-feedback .invalid-feedback.

, 1. was-validated <form>. 2. .is-valid .is-invalid . 3. .invalid-feedback .valid-feedback .

+1

More articles:


All Articles