webentwicklung-frage-antwort-db.com.de

Definieren eines "erforderlichen" Feldes in Bootstrap

Wie definiere ich ein Textfeld in Twitter Bootstrap 3 als erforderlich (mit rotem Rand)?

required="required" funktioniert nicht ...

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

Versuchen Sie es mit required="true" in Bootstrap 3

78
Vishal Malik

Update 2018

Seit der ursprünglichen Antwort wird die HTML5-Validierung jetzt in allen modernen Browsern unterstützt. Nun ist es am einfachsten, ein Feld auszufüllen, indem Sie einfach den gewünschten Platz verwenden.

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

oder in konformem HTML5:

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

Weitere Informationen zur Validierung von Bootstrap 4


In Bootstrap 3 können Sie dem übergeordneten Element eine Klasse "Validierungsstatus" zuweisen: http://getbootstrap.com/css/#forms-control-validation

Zum Beispiel zeigt has-error einen roten Rand um die Eingabe. Dies hat jedoch keine Auswirkungen auf die tatsächliche Validierung des Feldes. Sie müssen zusätzliche Client- (Javascript) oder Serverlogik hinzufügen, um das Feld auszufüllen.

Demo: http://bootply.com/90564


52
Zim

Testen Sie die native HTML5-Formularüberprüfung:

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

6
Fosnez

Die Formularvalidierung kann in Markup über die Daten-API oder über JavaScript aktiviert werden. Aktivieren Sie die Formularvalidierung automatisch, indem Sie Ihrem Formularelement data-toggle="validator" hinzufügen.

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

Oder aktivieren Sie die Validierung über JavaScript:

$('#myForm').validator()

und Sie müssen das required -Flag im Eingabefeld verwenden

Für mehr Details Hier klicken

5
Vishal Khadke

Wenn dies nicht funktioniert, sollten Sie Folgendes haben: novalidate = "novalidate" an Ihr Formular angehängt.

1
Jignesh Rawal

Verwenden Sie die "Bedarfsüberprüfung" neben der Formulargruppe, es wird funktionieren. 

0
Pradeep pai

Um ein Feld erforderlich zu machen, verwenden Sie required oder required="true".

Ich denke, required="required" wurde in Version 3 von Bootstrap nicht mehr unterstützt.

0
Ali Qorbani