2 champs de Select required avec un boutton "Save"

hana005
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

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
}