it-swarm.com.de

Wie verwende ich die Bootstrap 3-Formularüberprüfung, wenn sich die Schaltfläche zum Senden außerhalb des Formulars befindet?

Ich bin mit der Bootstrap 3-Implementierung der Formularvalidierung verwirrt. Ich bin neu bei Bootstrap und kann die Formularvalidierung nicht mit einem Formular abarbeiten, das keine Schaltfläche zum Senden enthält. Die Art der Formularvalidierung, die ich suche, kann mit diesem Code gesehen werden:

http://jsfiddle.net/hTPY7/1107/

<form>
    <div class="form-group">
        <label class="control-label" for="username">Email:</label>
        <div class="input-group">
            <input class="form-control" placeholder="Email" name="email" type="email" required />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="password">Password:</label>
        <div class="input-group">
            <input class="form-control" type="password" placeholder="Password" name="lastname" type="text" required />
        </div>
    </div>

        <button type="submit" class="btn btn-primary">Submit</button>
</form>

Ich weiß, dass ich das Formular mit etwas JQuery wie dem folgenden Code einreichen kann. Wie kann ich jedoch die Bootstrap 3-Validierung verwenden?

$( "#createUserSubmit" ).click(function() {
  $( "#newUserForm" ).submit();
});

Ich habe Stackoverflow seit Jahren gelesen, aber dies ist mein erster Beitrag. Ich habe nach Antworten gesucht, aber alles, was ich finden kann, sind Lösungen, die andere Validierungsbibliotheken verwenden. Ich möchte gerne die eigenen integrierten Funktionen von Bootstrap verwenden.

Vielen Dank!

7
Veita

Ich habe einige Nachforschungen angestellt und weiß jetzt, dass die Formularvalidierung nicht eine Funktion von Bootstrap war, sondern eine neue CSS3/HTML5-Funktion. Ich glaube nicht, dass es möglich ist (ohne JS), diese Formularprüfung durchzuführen, es sei denn, die Senden-Schaltfläche ist im Formular enthalten. Hier ist ein Beispiel, was nicht funktioniert hat:

http://jsfiddle.net/hTPY7/1112/

Hier ist ein Beispiel, wie es behoben wurde:

http://jsfiddle.net/hTPY7/1113/

Das <form>-Element muss mehr als nur das Formular umgeben, aber auch die Bootstrap-Modal-Divs.

Hier ist ein weiterer Beitrag, der mein Problem gut zusammenfasst: 

HTML5-Formularvalidierung für die Schaltfläche AJAX senden

8
Veita

wir müssen eine Art externer Bibliothek oder benutzerdefinierten Code verwenden, um Validierungsregeln hinzuzufügen, sodass wir Validierungsklassen zum Formular hinzufügen können. Ich glaube nicht, dass es einen anderen Weg gibt. 

Beispiel:

http://jsfiddle.net/mapb_1990/hTPY7/9/

HTML:

<form>
    <div class="form-group">
        <label class="control-label" for="firstname">Nome:</label>
        <div class="input-group">
            <span class="input-group-addon">$</span>
            <input class="form-control" placeholder="Insira o seu nome próprio" name="firstname" type="text" />
        </div>
    </div>

    <div class="form-group">
        <label class="control-label" for="lastname">Apelido:</label>
        <div class="input-group">
            <span class="input-group-addon">€</span>
            <input class="form-control" placeholder="Insira o seu apelido" name="lastname" type="text" />
        </div>
    </div>

        <button type="submit" class="btn btn-primary">Submit</button>
</form>

JS:

$('form').validate({
    rules: {
        firstname: {
            minlength: 3,
            maxlength: 15,
            required: true
        },
        lastname: {
            minlength: 3,
            maxlength: 15,
            required: true
        }
    },
    highlight: function(element) {
        $(element).closest('.form-group').addClass('has-error');
    },
    unhighlight: function(element) {
        $(element).closest('.form-group').removeClass('has-error');
    },
    errorElement: 'span',
    errorClass: 'help-block',
    errorPlacement: function(error, element) {
        if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
        } else {
            error.insertAfter(element);
        }
    }
});
5
aamir sajjad

Wenn Sie HTML5 mit der Formularüberprüfung akzeptieren, ist es sehr einfach (kein Javascript erforderlich):

<form id="my-awesome-form">
    ...
</form>
...
<button type="submit" form="my-awesome-form">Submit</button>

Quelle: https://www.w3schools.com/tags/att_button_form.asp

Die Abdeckung ist ziemlich anständig: https://caniuse.com/#feat=form-attribute

0
Multihunter