Discussion :

[totot]

bonjour,

je développer un formulaire avec boostrap et je souhaiterai lorsque j'envoie mon formulaire et que mon champ est pas rempli, qu'il soit en rouge avec le message d'erreur associé en dessous

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
                                <div class="col-md-9">
                                    <form role="form" method="POST">
                                    	<div class="form-group">
                                    		<label for="prenom" class="control-label">Pr&eacute;nom</label>
                                    		<input type="prenom" class="form-control" id="prenom" data-error="Le pr&eacute;nom est obligatoire !" required="required">
                                    		<div class="help-block with-errors"></div>
                                    	</div>
 
                                    	<div class="form-group">
                                    		<button type="submit" class="btn btn-primary">Cr&eacute;er</button>
                                    		<button type="reset" class="btn btn-default">Annuler</button>
                                    	</div>
                                    </form>
                                </div>

Et voilà ce que j'obtient quand je clique sur le bouton créer


Je souhaiterais enlever le message veuillez renseigner ce champ mais je l'indique null part dans le code

[mathieu]

c'est la navigateur qui génère cet affichage.
si vous ne le voulez pas, retirez l'attribut "required" du champ

[totot]

si j'enlève le required, sa me bloque pas mon formulaire et je peut du coup envoyer des valeur vide. Je voudrais que sa le bloque dès que je clique sur le bouton en javascript / jquery

[Elliot31]

Il me semble aussi que la valeur "required" n'est pas prise en compte par Safari (a confirmer) donc toujours intéressant de faire ça en js.

[totot]

Du coup je peut pas faire ce que je souhaite sous chrome?

[ParisElliot]

Si bien sur !

Regarde tu peux t'aider de ce tutoriel

[totot]

Ok
je vais laiiser le message afficher par chrome c'est plus propre au niveau code

[Celira]

D'après ce que je peux voir, l'attribut required est géré par tous les navigateurs modernes (autrement dit les navigateurs qui supportent HTML5, autrement dit tout à partir de IE10)
https://html5test.com/compare/featur....required.html

Et sinon Bootstrap inclut une mise en forme pour les formulaires en erreur (http://getbootstrap.com/css/#forms-control-validation), mais elle ne s'applique pas toute seule, il faut un minimum de JS pour le faire...