web-dev-qa-db-fra.com

Comment utiliser la validation de formulaire Bootstrap 3 lorsque le bouton d'envoi est en dehors du formulaire?

Je suis confondu avec l'implémentation Bootstrap 3 de la validation de formulaire. Bootstrap ne connaît pas grand-chose et je n'arrive pas à faire en sorte que la validation de formulaire fonctionne avec un formulaire qui n'inclut pas de bouton d'envoi. Le type de validation de formulaire que je recherche peut être vu avec ce code:

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>

Je sais que je peux soumettre le formulaire avec un certain JQuery, comme le code ci-dessous, mais comment puis-je utiliser la validation Bootstrap 3?

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

Je lis Stackoverflow depuis des années, mais ceci est mon premier post. J'ai cherché des réponses, mais tout ce que je peux trouver, ce sont des solutions qui utilisent d'autres bibliothèques de validation. Je voudrais utiliser les propres fonctions intégrées de Bootstrap.

Merci!

javascriptjqueryformsvalidationtwitter-bootstrap-3
7
Veita

J'ai effectué des recherches et je sais maintenant que la validation du formulaire que je voyais n'était pas une fonction de Bootstrap mais une nouvelle fonctionnalité CSS3/HTML5. Je ne crois pas qu'il soit possible (sans JS) d'effectuer cette validation de formulaire à moins que le bouton d'envoi ne soit inclus dans le formulaire. Voici un exemple de ce qui ne fonctionnait pas:

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

Voici un exemple de la façon dont cela a été corrigé:

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

L'élément <form> doit entourer plus que le formulaire, mais également les divs modales Bootstrap.

Voici un autre article qui résume bien mon problème: 

Validation de formulaire HTML5 pour le bouton AJAX submit

8
Veita

nous devons utiliser une sorte de bibliothèque externe ou un code personnalisé pour ajouter des règles de validation, ce qui nous permettra d'ajouter des classes de validation pour former. Je ne pense pas qu'il existe un autre moyen. 

Exemple:

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

Si vous acceptez HTML5, avec sa validation de formulaire, c'est très simple (aucun javascript n'est requis):

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

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

La couverture est assez bonne: https://caniuse.com/#feat=form-attribute

0
Multihunter