2 champs de Select required avec un boutton "Save"

Par hana005, il y a 9 ans

Les bases HTML/CSS

Bonjour,
j'ai 2 select,dont le choix d'une option est obligatoire,mon problème est que j'ai attribué "required" à chaque select mais lorsque je clique sur le boutton "Save" les informations peuvent se passer même le client n'a pa choisit aucune option

voici mon code:

<div> <button class="btn btn-action" ng-click="save()">Save</button> </div> <form> <div class="row"> <select required> <option ng-repeat="pi in listProduitAvailable1" value="{{pi.id}}">{{pi.reference1}}</option> </select> <select required> <option ng-repeat="pi in listProduitAvailable2" value="{{pi.id}}">{{pi.reference1}}</option> </select> </div> </form>

comment je peut corriger mon code pourque lorsque le client clique sur le boutton,la requête ne dois pas passer si il n'a pa choisit des options

merci pour l'aide

1 réponse

SLK, il y a 9 ans

Salut,

ton bouton "Save" est à l'extérieur de la balise "form", du coup j'imagine que la vérification standard d'HTML5 avec les "required" ne se fait pas.

On dirait que tu as fais exprès parce-qu'il semble que tu utilise javaScript pour faire des trucs.

Hum...

Comme je ne connais pas tout le code j'ai du mal à conseiller, mais je te propose 2 pistes (soit l'une, soit l'autre) :

1) Tu remets le bouton "save" dans la balise "form" en l'écrivant de façon standard

<form action="ton_action" method="post"> ... <input type="submit" value="Save"> </form>

2) C'est dans ton javaScript que tu va vérifier que le "select" a bien été utilisé.
si oui, tu envoies le formulaire.

Moi je ne sais le faire qu'en jQuery...

if ($(' #my_select ').is(':selected')) { // l'utilisateur a bien sélectionné un truc }