it-swarm.com.de

So erstellen Sie eine Abbrechen-Schaltfläche in Bootstrap

Ich habe das folgende Bootstrap-Markup:

<!-- Text input-->
<div class="form-group">
  <label class="col-md-4 control-label" for="username">Username</label>
  <div class="col-md-4">
  <input id="username" name="username" type="text" placeholder="" class="form-control input-md" required="" maxlength="8" value="">
  </div>
</div>

<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-8">
    <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
    <button id="cancel" name="cancel" class="btn btn-default" value="1">Cancel</button>
  </div>
</div>

Wenn ich auf die Schaltfläche Create Profile klicke, funktioniert das Formular einwandfrei und zeigt an, dass bestimmte Felder "Erforderlich" sind. Wenn ich jedoch auf die Schaltfläche Cancel klicke, kann ich das Formular wegen unvollständiger Pflichtfelder nicht verlassen.

Gibt es in Bootstrap eine Funktion zum Abbrechen von Schaltflächen?

8
H. Ferrence

Ändern Sie Ihren Code wie folgt:

<!-- Button (Double) -->
<div class="form-group">
  <label class="col-md-4 control-label" for="submit"></label>
  <div class="col-md-8">
    <button id="submit" name="submit" class="btn btn-primary" value="1">Create Profile</button>
    <a href="/link-to/whatever-address/" id="cancel" name="cancel" class="btn btn-default">Cancel</a>
  </div>
</div>
10

setzen Sie einfach das Typattribut auf Reset, wie unten gezeigt;

<button type="reset" class="btn btn-default pull-right">Cancel</button>

0
Emmanuel Aninze