Bonjour tout le monde !

Voilà avant la validation d'un formulaire (donc en JS), je souhaiterais 'comparer' les valeurs des input radio et agir en conséquence.

2 choix doivent être sélectionnés, avec pour chaque choix 4 radio.

Si dans le choix 1, le radio 'chef1' est sélectionné et que dans le choix 2, le radio 'chef2' est sélectionné, je bloque la validation du formulaire et j'affiche un message d'erreur.

3 soucis par rapport à mon code:

- comment empêcher la validation du formulaire si les 2 radios sont similaires ?

- si 1 seul choix est fait, le message d'erreur indique que le formulaire est ok, or ce n'est pas ce que je veux. Avec le test que je fais c'est une réaction logique mais je ne vois pas comment y remédier...

- en changeant plusieurs fois les choix de radio, le JS a comme du mal à réagir et va finir par indiquer que le formulaire est ok même si 2 radios similaires sont cochés...

Voilà, j'espère que j'ai été clair, je vous remercie énormément à l'avance ! :-)

Code HTML:

  <p id="text_p"><u>Choix 1 :</u></br>
    <input type="radio" name="choix1" id="chef1" value="Chef de projet" onclick="verifierCheckbox()"> Chef de projet<br>
    <input type="radio" name="choix1" id="integrateur1" value="Integrateur" onclick="verifierCheckbox()"> Intégrateur<br>
    <input type="radio" name="choix1" id="graphiste1" value="Graphiste" onclick="verifierCheckbox()"> Graphiste<br>
    <input type="radio" name="choix1" id="redacteur1" value="Rédacteur" onclick="verifierCheckbox()"> Rédacteur
  </p>

  <p id="text_p"><u>Choix 2 : </u></br>
    <input type="radio" name="choix2" id="chef2" value="Chef de projet" onclick="verifierCheckbox()"> Chef de projet<br>
    <input type="radio" name="choix2" id="integrateur2" value="Integrateur" onclick="verifierCheckbox()"> Intégrateur<br>
    <input type="radio" name="choix2" id="graphiste2" value="Graphiste" onclick="verifierCheckbox()"> Graphiste<br>
    <input type="radio" name="choix2" id="redacteur2" value="Rédacteur" onclick="verifierCheckbox()"> Rédacteur
  </p>

<span id="error_check"> </span>

Code JS:

function verifierCheckbox() {
        var chef1 = document.getElementById('chef1');
        var chef2 = document.getElementById('chef2');
        var integrateur1 = document.getElementById('integrateur1');
        var integrateur2 = document.getElementById('integrateur2');
        var graphiste1 = document.getElementById('graphiste1');
        var graphiste2 = document.getElementById('graphiste2');
        var redacteur1 = document.getElementById('redacteur1');
        var redacteur2 = document.getElementById('redacteur2');

        if(chef1.checked != chef2.checked || integrateur2.checked != integrateur1.checked || graphiste1.checked != graphiste2.checked || redacteur2.checked != redacteur1.checked){
          document.getElementById('error_check').innerHTML="Le formulaire est complété ! Vous pouvez valider votre inscription.";
        }else{
          document.getElementById('error_check').innerHTML="Vous ne pouvez pas sélectionner 2 fois le même rôle !";
        }
      }

Il y a une erreur de logique si l'utilisateur ne doit pas faire deux fois le même choix les radios boutons analogues doivent tous être différents d'où des et (&&) et non des ou (||) dans la condition.

Mais le test est inutilement compliqué puisque qu'un seul radio bouton peut être coché pour chaque choix, il suffit donc de comparer sur les valeurs des choix obtenus à partir du nom du formulaire (balise form obligatoire) et des deux noms (name choix1 et choix2) des zones de texte. 

-
Edité par 007julien 14 janvier 2018 à 2:05:41

Comme l'a dit 007julien , la logique n'est pas correcte.

Je te conseille d'intégrer JQuery , pour faciliter ta fonction.

Dans ce cas le je pourrais t'aider et simplifier ton code

Merci pour vos retours.

007julien, j'ai essayé de m'appuyer sur ce que tu m'as dis et je pense avoir plus ou moins répondu à tes conseils. Cependant, sous firefox ou safari, le comportement est totalement différent du site sur lequel j'ai effectué mes tests (http://jsfiddle.net/rQsSw/). Sur ce site, tout fonctionne parfaitement sans soucis, mais en intégrant le script dans ma page finale, les résultats semblent aléatoire. Si je change trop de fois les choix, le script finit par m'indiquer que je ne peux pas sélectionner 2 fois le même rôle. Or, les 2 choix sont bien différents...

Du coup, auriez-vous une idée ? Je vous reposte mes codes finaux...

HTML:

<form name='form'>
 <p id="text_p"><u>Choix 1 :</u></br>
    <input type="radio" name="choix1" id="chef1" value="Chef de projet" onclick="verifierCheckbox()"> Chef de projet<br>
    <input type="radio" name="choix1" id="integrateur1" value="Integrateur" onclick="verifierCheckbox()"> Intégrateur<br>
    <input type="radio" name="choix1" id="graphiste1" value="Graphiste" onclick="verifierCheckbox()"> Graphiste<br>
    <input type="radio" name="choix1" id="redacteur1" value="Rédacteur" onclick="verifierCheckbox()"> Rédacteur
  </p>
 
  <p id="text_p"><u>Choix 2 : </u></br>
    <input type="radio" name="choix2" id="chef2" value="Chef de projet" onclick="verifierCheckbox()"> Chef de projet<br>
    <input type="radio" name="choix2" id="integrateur2" value="Integrateur" onclick="verifierCheckbox()"> Intégrateur<br>
    <input type="radio" name="choix2" id="graphiste2" value="Graphiste" onclick="verifierCheckbox()"> Graphiste<br>
    <input type="radio" name="choix2" id="redacteur2" value="Rédacteur" onclick="verifierCheckbox()"> Rédacteur
  </p>
</form>

<span id="error_check">Veuillez sélectionner 2 rôles différents</span>

JS:

function verifierCheckbox() {
if(document.form.choix1.value == '' && document.form.choix2.value == ''){
		document.getElementById('error_check').innerHTML="Veuillez sélectionner 2 rôles différents";
}
else if(document.form.choix1.value != '' && document.form.choix2.value == ''){
  	document.getElementById('error_check').innerHTML="Veuillez sélectionner 1 autre rôle";
}
else if(document.form.choix1.value != '' && document.form.choix2.value != ''){
		if(document.form.choix1.value == document.form.choix2.value){
		document.getElementById('error_check').innerHTML="Vous ne pouvez sélectionner 2 fois le même rôle";
 		}
    else{
  	document.getElementById('error_check').innerHTML="Vous pouvez valider votre inscription";
    }
}
else{}
}

-
Edité par BrandonLe1 14 janvier 2018 à 18:59:42

C'est plutôt ça que tu veux ? :

function verifierCheckbox() {
	// Vu que c'est un évenement onclick inutile de vérifier si les deux choix son vide. elle le sont au départ.
	// On vérifie si un des choix est vide dans les deux senses.
	if(document.form.choix1.value != '' && document.form.choix2.value == '' || (document.form.choix1.value == '' && document.form.choix2.value != '') ){
		document.getElementById('error_check').innerHTML="Veuillez sélectionner 1 autre rôle";
	}
	//Dans le cas contraire les deux choix on été remplis
	else{
		if(document.form.choix1.value == document.form.choix2.value){
			document.getElementById('error_check').innerHTML="Vous ne pouvez sélectionner 2 fois le même rôle";
		}
		else{
			document.getElementById('error_check').innerHTML="Vous pouvez valider votre inscription";
		}
	}
}

Effectivement mohzah, le code est bien plus léger et clair comme tu me le présente ! Et merci pour les précisions ! :-)

En faisant des tests dans une page vierge de tout autre code, le script fonctionne parfaitement. Je soupçonne donc un soucis avec le reste de ma page, je vais essayer d'y remédier en remplaçant chaque morceau de page

Cela dit, savez vous comment je pourrais bloquer la validation de mon formulaire tant que les radios ne sont pas sélectionnés correctement ? J'ai bien réussit à bidouiller quelque chose mais c'est très facilement contournable (et moins ce sera contournable, mieux ce sera :-/), et je n'ai aucune idée concrète pour procéder autrement.

Donc si vous avez des pistes ou suggestions, je suis preneur

Et merci bien ! :-D

C'est effectivement un peu subtil de récupérer les valeurs communes. Après quelques recherches, je propose ce script (tout de même un peu plus léger que jQuery) qui devrait fonctionner sur tous les navigateurs et nonseulemnt les derniers nés.

<!DOCTYPE HTML>
<html lang="fr">
<head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <style>
html,body {margin:0;padding:0;text-align:center;background-color:#000;color:#fff;font-family:Courier,monospace}
div {display:block;position:absolute;}
  </style>
</head>
<body>
<form id='form'>
 <p id="text_p"><u>Choix 1 :</u><br>
    <input type="radio" name="first" id="chef1" value="Chef de projet" onclick="verifierCheckbox()"> Chef de projet<br>
    <input type="radio" name="first" id="integrateur1" value="Integrateur" onclick="verifierCheckbox()"> Intégrateur<br>
    <input type="radio" name="first" id="graphiste1" value="Graphiste" onclick="verifierCheckbox()"> Graphiste<br>
    <input type="radio" name="first" id="redacteur1" value="Rédacteur" onclick="verifierCheckbox()"> Rédacteur
  </p>

  <p id="text_p"><u>Choix 2 : </u><br>
    <input type="radio" name="second" id="chef2" value="Chef de projet" onclick="verifierCheckbox()"> Chef de projet<br>
    <input type="radio" name="second" id="integrateur2" value="Integrateur" onclick="verifierCheckbox()"> Intégrateur<br>
    <input type="radio" name="second" id="graphiste2" value="Graphiste" onclick="verifierCheckbox()"> Graphiste<br>
    <input type="radio" name="second" id="redacteur2" value="Rédacteur" onclick="verifierCheckbox()"> Rédacteur
  </p>
</form>
<p id="error_check">Veuillez sélectionner deux rôles différents</p>
<script>
function getRadioVal(form, name) {var val="undefined";
    var radios = form.elements[name];// get list of radio buttons with specified name
    for (var i=0, len=radios.length; i<len; i++) {
        if ( radios[i].checked ) {val = radios[i].value;break;}}
    return val;
}


function verifierCheckbox() {
  var frm=document.getElementById('form');
  var firstVal=getRadioVal(frm,"first");
  var secondVal=getRadioVal(frm,"second");
  console.log(firstVal+" "+secondVal)


  if (firstVal=="undefined" || secondVal=="undefined"){
      document.getElementById("error_check").innerHTML="Veuillez sélectionner effectivement deux rôles ";
      return}
  if(firstVal==secondVal){
    	document.getElementById("error_check").innerHTML="Veuillez sélectionner deux rôles différents";
	return}
   document.getElementById('error_check').innerHTML="Vous pouvez valider votre inscription";
}

</script>
</body>
</html>

-
Edité par 007julien 15 janvier 2018 à 11:30:19