Changer l'attribut "required"

Résolu
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   -  
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   -
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 !



A voir également:

1 réponse

Réponse 1 / 1
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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;

0
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   20
 
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 !
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752 > emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention  
 
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;
0
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   20 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
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 !
0
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   20
 
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");
0
emrh Messages postés 427 Date d'inscription   Statut Membre Dernière intervention   20
  
<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 !
0