web-dev-qa-db-fra.com

Impossible de faire fonctionner la validation dans Bootstrap 4

J'essaie d'activer validation par Bootstrap et j'ai collé dans l'exemple suivant sur ma 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>

Je peux voir que l'apparence du contrôle d'entrée a changé (c'est un peu arrondi et beaucoup plus esthétique maintenant) mais il ne montre toujours pas le vert frontière comme on peut le voir sur la page liée. Le Bootstrap vers lequel je me connecte est indiqué comme suit.

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

En essayant de rechercher le problème, je n’arrive qu’aux exemples de liens vers le site officiel à partir duquel j’ai reçu mon échantillon; J'ai n violon illustrant le problème .

Que puis-je faire à ce sujet? Qu'est-ce que je rate?

htmlcsstwitter-bootstrapvalidationbootstrap-4
18
user1675891

La validation a changé depuis le version bêta de Bootstrap 4 .

Les sélecteurs d'état valides utilisent le was-validated classe qui serait ajoutée dynamiquement après validation du formulaire via côté client JavaScript. Par exemple...

<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

Mise à jour 2018 - Bootstrap 4.0.0
exemple de démonstration de validation de formulaire

Comme expliqué dans la documentation, si vous souhaitez utiliser la validation côté serveur , vous pouvez simplement définir la valeur is-valid ou is-invalid classes sur les contrôles de formulaire ...

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

Il semble que la validation change à nouveau dans la version finale de Bootstrap 4: http://getbootstrap.com/docs/4.0/components/forms/#validation .

Cela devient plus compliqué que je pensais.

La validation côté client de style personnalisé est recommandée:

  1. Une fois validé, le formulaire ajoute une classe nommée was-validated.
  2. Les messages de commentaires sont placés dans .valid-feedback ou .invalid-feedback.

Pour la validation côté serveur:

  1. Pas besoin d was-validated classe sur le <form> tag.
  2. Ajouter .is-valid ou .is-invalid sur le contrôle d’entrée.
  3. Ajouter .invalid-feedback ou .valid-feedback pour le message de retour.
9
Blaise