web-dev-qa-db-fra.com

Définir un champ `required` dans Bootstrap

Comment définir le champ de texte requis (avec une bordure rouge) dans Twitter Bootstrap 3?

required="required" ne fonctionne pas ...

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>
twitter-bootstraptwitter-bootstrap-3
53
motorcb

Essayez d'utiliser required="true" dans bootstrap 3

78
Vishal Malik

Mise à jour 2018

Depuis la réponse originale, la validation HTML5 est désormais prise en charge par tous les navigateurs modernes. Maintenant, le moyen le plus simple de créer un champ requis consiste simplement à utiliser l'attibute requis.

<input type="email" class="form-control" id="exampleInputEmail1" required>

ou en HTML5 conforme:

<input type="email" class="form-control" id="exampleInputEmail1" required="true">

En savoir plus sur la validation Bootstrap 4

Dans Bootstrap 3, vous pouvez appliquer une classe "état de validation" à l'élément parent: http://getbootstrap.com/css/#forms-control-validation

Par exemple, has-error affichera une bordure rouge autour de l'entrée. Cependant, cela n'aura aucun impact sur la validation réelle du champ. Vous devez ajouter une logique client supplémentaire (javascript) ou une logique de serveur pour rendre le champ obligatoire.

Démo: http://bootply.com/90564

52
Zim

Découvrez la validation de formulaire HTML5 native:

http://www.the-art-of-web.com/html/html5-form-validation/

6
Fosnez

La validation de formulaire peut être activée dans le balisage via data-api ou via JavaScript. Activez automatiquement la validation de formulaire en ajoutant data-toggle="validator" à votre élément de formulaire.

<form role="form" data-toggle="validator">
   ...
</form>

Ou activer la validation via JavaScript:

$('#myForm').validator()

et vous devez utiliser le drapeau required dans le champ de saisie

Pour plus de détails Cliquez ici

5
Vishal Khadke

Si cela ne fonctionne pas si vous avez quelque chose comme: novalidate = "novalidate" attaché à votre formulaire.

1
Jignesh Rawal

Utilisez 'besoin-validation' en dehors du groupe de formulaires, cela fonctionnera. 

0
Pradeep pai

Pour rendre un champ obligatoire, utilisez required ou required="true"

Je pense que required="required" est obsolète dans la version 3 de bootstrap.

0
Ali Qorbani