Changer l'attribut "required" [Résolu/Fermé]

Signaler
Messages postés
59
Date d'inscription
mardi 9 décembre 2014
Statut
Membre
Dernière intervention
8 juin 2020
-
Messages postés
59
Date d'inscription
mardi 9 décembre 2014
Statut
Membre
Dernière intervention
8 juin 2020
-
Bonsoir à tous,

Dans un formulaire j'ai une partie qui s'affiche avec du JavaScript si on
coche un bouton radio "Oui".
J'aimerai que le choix dans le select qui vient d'apparaître soit obligatoire
(required) tant que l'on ne coche pas "Non"...
Je n'y connais rien en JavaScript, alors je vous demande votre aide et vous remercie par avance de m'expliquer ce qui cloche dans ce que j'ai écris !


Cet aliment peut il être un repas à lui seul ?<br/>
Oui <input type="radio" name="repas" value="oui" id="oui" onClick="afficher();" /> <br />
Non <input type="radio" name="repas" value="non" id="non" checked onClick="cacher();"/> <br />
<p id="champ_cache">
<label for="rayon">Choisir le type de plat : </label>
<select name="type" id="type">
<option value=""></option>
<option value="ENTRÉE">ENTRÉE</option>
<option value="PLAT">PLAT</option>
<option value="DESSERT">DESSERT</option>
</select><br />
</p>




<script type="text/javascript">
document.getElementById("champ_cache").style.display = "none";
document.getElementById("type").setAttribute("required", "");
function afficher() {
document.getElementById("champ_cache").style.display = "block";
document.getElementById("type").setAttribute("required", "required");
}

function cacher() {
document.getElementById("champ_cache").style.display = "none";
document.getElementById("type").setAttribute("required", "");
}
</script>


EDIT => Quand je coche "NON", le select "type de plat" apparaît bien mais je ne peux pas valider mon formulaire : Firefox me demande de "Sélectionner un élément de la liste" en m'affichant cette indication tout en haut à gauche à un endroit qui ne correspond à rien !



1 réponse

Messages postés
29743
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2020
2 842
Bonjour,
En html5 (via JS) tu peux utiliser la syntaxe suivante pour ajouter le REQUIRED

// Pour le mettre
document.getElementById("champ_cache").attributes["required"] = "required"; 

// pour l'enlever
document.getElementById("champ_cache").attributes["required"] = null;

Messages postés
59
Date d'inscription
mardi 9 décembre 2014
Statut
Membre
Dernière intervention
8 juin 2020

Merci jordan45, mais ça ne fonctionne pas, j'ai corrigé ainsi pour adapter à
mon code :

<script type="text/javascript">
document.getElementById("champ_cache").style.display = "none";
document.getElementById("type").attributes["required"] = null;
function afficher() {
document.getElementById("champ_cache").style.display = "block";
document.getElementById("type").attributes["required"] = "required";
}

function cacher() {
document.getElementById("champ_cache").style.display = "none";
document.getElementById("type").attributes["required"] = null;
}
</script>



Car l'élément concerné à un name="type" et un id="type" mais maintenant, je n'ai plus de contrôle, même si j'ai coché le bouton "OUI" cet aliment peut être un plat !
Messages postés
29743
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2020
2 842 >
Messages postés
59
Date d'inscription
mardi 9 décembre 2014
Statut
Membre
Dernière intervention
8 juin 2020

Déjà .. "type" est un mot clé utilisé dans plusieurs langages tels que le HTML ... il est fortement déconseillé de l'utiliser en tant qu'ID ou NAME d'un élément....
(renomme le en inp_type par exemple)

Ensuite.. tu peux éventuellement tester avec cette autre syntaxe:
document.getElementById("inp_type").required = true;
Messages postés
59
Date d'inscription
mardi 9 décembre 2014
Statut
Membre
Dernière intervention
8 juin 2020
>
Messages postés
29743
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 octobre 2020

J'ai corrigé tous mes "type" en inp_type, tu as raison, on est jamais assez prudent, mais ça ne fonctionne toujours pas !
Je n'ai plus de demande farfelue de Firefox en dehors du formulaire, mais il accepte de valider le formulaire alors que le bouton est sur OUI et le select non renseigné...

EDIT : J'ai mis les null en false, fonctionne pas plus !
Messages postés
59
Date d'inscription
mardi 9 décembre 2014
Statut
Membre
Dernière intervention
8 juin 2020

La doc de Mozilla donne l'indication suivante :

element.setAttribute(nom,valeur);

nom est le nom du nouvel attribut sous forme de chaîne.
valeur est la nouvelle valeur désirée de l'attribut.

Exemple

var d = document.getElementById("d1");
d.setAttribute("align", "center");

j'ai essayé sans succès :
var inp_type = document.getElementById("inp_type");
inp_type.setAttribute("required", "required");
Messages postés
59
Date d'inscription
mardi 9 décembre 2014
Statut
Membre
Dernière intervention
8 juin 2020

<select name="inp_type" id="inp_type">
<option value=""></option>
<option value="ENTRÉE">ENTRÉE</option>
<option value="PLAT">PLAT</option>
<option value="DESSERT">DESSERT</option>
</select><br />


<script type="text/javascript">
document.getElementById("champ_cache").style.display = "none";
document.getElementById("inp_type").required = false;
function afficher() {
document.getElementById("champ_cache").style.display = "block";
document.getElementById("inp_type").required = true;
}

function cacher() {
document.getElementById("champ_cache").style.display = "none";
document.getElementById("inp_type").required = false;
}
</script>


Ça fonctionne !

Merci pour ton aide jordane45 !