Nie można dokonać sprawdzania poprawności w Bootstrap 4

Question

Próbuję aktywować validation by Bootstrap i wkleiłem w przykładowej stronie na mojej stronie.

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

widzę, że pojawienie się kontroli wejściowej uległa zmianie (jest nieco zaokrąglona i bardziej estetyczny teraz) ale jeszcze nie pokazują zieloną granicę, jak można zobaczyć na stronie powiązanej do. Bootstrap, z którym się łączę, jest wskazany w następujący sposób.

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

Próbując googlearch problemu, przyjeżdżam tylko na przykładach z linkami do oficjalnej strony skąd mam moją próbkę, więc nie ma raczej niewiele, aby pomóc mi tam. Mam a fiddle illustrating the issue.

Co mogę z tym zrobić? czego mi brakuje?

Answer 1

Walidacja zmieniła się z Bootstrap 4 beta release.

Poprawne selektory państwowe użyć klasy was-validated który będzie dodany dynamicznie po walidacji formularza poprzez stronie klienta JavaScript. Na przykład ...

<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

Aktualizacja 2018 - Bootstrap 4.0.0
Form Validation Example Demo

---

jak wyjaśniono w docs, jeśli masz zamiar używać server- Po stronie sprawdzania poprawności można po prostu ustawić is-valid lub is-invalid zajęcia na formularzu-kontroli ...

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

Answer 2

Wydaje zmiany walidacji ponownie w ostatecznej wersji systemu Bootstrap 4.

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

Staje się bardziej skomplikowana niż Myślałem.

Zalecane jest sprawdzenie strony klienta po stronie klienta.

1. Gdy zatwierdzone, forma dodaje klasę o nazwie was-validated
2. komunikatów zwrotnych są owinięte w ciągu .valid-feedback lub .invalid-feedback.

walidacji po stronie serwera, 1. Nie potrzeba was-validated klasy w znaczniku <form>. 2. Dodaj .is-valid lub .is-invalid na sterowaniu wejściowym. 3. Dodaj .invalid-feedback lub .valid-feedback, aby otrzymać wiadomość zwrotną.