Validation des boutons radio avec Javascript

Question

Je crée un formulaire de demande de paiement où l'utilisateur va sélectionner comment il veut être payé pour les heures supplémentaires travaillées. Les deux choix sont «payer» (l'utilisateur reçoit un salaire supplémentaire dans son chèque de paie), ou «temps» (l'utilisateur reçoit un congé compensatoire à prendre à une date ultérieure).

J'ai créé une entrée de bouton radio pour que l'utilisateur sélectionne l'un ou l'autre. J'ai écrit une validation pour m'assurer qu'un bouton est sélectionné et cela fonctionne bien dans mon programme de test, mais quand je l'apporte dans le code pour ce projet, le code ne fonctionne pas. autant que je peux voir, il n'y a aucune différence entre mon programme de test et le projet. J'essaie d'utiliser un booléen plus simple et je voudrais coller avec cette option plutôt qu'avec une boucle forcée ou en utilisant JQuery si possible.

ici est la partie pertinente du html:

<form class="oTcard" name="otCard" onSubmit="return submitCard()" method="post"> 
<div> 
    <label> 
     <span>request</span> 
      <div style="display:block"> 
       <input class="radio" type="radio" id="timePay" name="timePay" value="0" ><span>time</span> 
       <input class="radio" type="radio" id="timePay" name="timePay" value="1"><span>pay</span> 
      </div> 
    </label> 
</div> 
<input type="submit" id="submit" value="submit"> 
</form> 

ici est la partie pertinente du javascript:

function submitCard (form) { 
    errorString = ""; 
    if((form.timePay[0].checked == false) && (form.timePay[1].checked == false)) { 
     alert("please choose either time or pay"); 
     timePay[0].focus(); 
     return false; 
    } 
    if(errorString = "") { 
     form.submit() 
    } 
} 

Modifier pour ajouter ce qui suit:

Réponse de Cyril DD m'a fait dans la bonne direction. J'ai changé l'ID des boutons radio pour être unique à chaque bouton. Le code HTML se lit maintenant:

<form class="oTcard" name="otCard" onSubmit="return submitCard()" method="post"> 
<div> 
    <label> 
     <span>request</span> 
      <div> 
       <input class="radio" type="radio" id="selectTime" name="timePay" value="0"><span>time</span> 
       <input class="radio" type="radio" id="selectPay" name="timePay" value="1"><span>pay</span> 
      </div> 
    </label> 
</div> 
<input type="submit" id="submit" value="submit"> 
</form> 

je puis défini chaque bouton comme une variable distincte plutôt que collectivement « timePay » comme je l'avais avant et changé le javascript comme suit:

if((selectTime.checked == false) && (selectPay.checked == false)) { 
    alert("please choose either time or pay"); 
    selectTime.focus(); 
    return false; 
} 

Answer 1

d'abord dans votre code HTML: Vous devez utiliser le même attribut « name », mais un autre ID (demo)

Certains navigateur peut ne pas être compatibles avec ce que vous essayez de faire.Au lieu d'utiliser un paramètre « forme » dans function submitCard (form), vous devriez juste avoir une fonction function submitCard() puis trouver les éléments que vous voulez dans la page Web en utilisant leur carte d'identité

function submitCard() { 
    checkbox1 = document.getElementById("timeCheckBox").checked 
    checkbox2 = document.getElementById("payCheckBox").checked 
    if(!checkbox1 && !checkbox2) 
     alert("nothing checked !"); 
     return false; 
    } 
    else{ 
     return true 
    } 
} 

Le code HTML ressemblerait

<form class="oTcard" name="otCard" onSubmit="return submitCard()" method="post"> 
<div> 
    <label> 
     <span>request</span> 
      <div style="display:block"> 
       <input class="radio" type="radio" id="timeCheckBox" name="timePay" value="0" ><span>time</span> 
       <input class="radio" type="radio" id="payCheckBox" name="timePay" value="1"><span>pay</span> 
      </div> 
    </label> 
</div> 
<input type="submit" id="submit" value="submit"> 
</form> 

Answer 2

Vous n'êtes pas passer une référence du formulaire à la fonction submitCard().

changement

<form class="oTcard" name="otCard" onSubmit="return submitCard()" method="post">

à

<form class="oTcard" name="otCard" onSubmit="return submitCard(this)" method="post">

Quelques autres notes:

1. Vous ne devriez pas utiliser l'identifiant timePay plus d'une fois sur le formulaire.
2. Vous ne devez pas mettre les balises div à l'intérieur des balises span.

Exemple de travail here

Answer 3

<form class="oTcard" name="otCard" onSubmit="return submitCard(this)" method="post"> 

doivent passer aux arguments function.Thats pourquoi la validation JS s'échoué.