Validation du groupe de boutons radio JavaScript

StackOverflow https://stackoverflow.com/questions/4977084

Question

J'aimerais que votre aide pour développer une fonction JavaScript pour valider si l'un des groupes Radiobutton suivants (IDTYPE) est sélectionné et quelle valeur est cochée et affiche le message d'erreur dans la division (validationError) au cas d'aucune touche radio sélectionnée ?? 

<td>
<div>
<span>
<input type="radio" name="IDType" id="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" id="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
&nbsp;
</div>
</div>
</td>

Merci pour votre aide .....

Était-ce utile?

La solution

Tout d'abord, comme indiqué mes collègues, vous ne pouvez pas avoir le même identifiant ("IDTYPE") pour vos deux boutons radio.

Voici une solution avec JavaScript uniquement, sans aucune jQuery. 

<html>
<head>
<script type="text/javascript">
function Validate() {
    var radios = document.getElementsByName('IDType')

    for (var i = 0; i < radios.length; i++) {
        if (radios[i].checked) {
        alert("Selected Value = " + radios[i].value);
        return true; // checked
    }
    };

    // not checked, show error
    document.getElementById('ValidationError').innerHTML = 'Error!!!';
    return false;
}
</script>
</head>
<body>
<form>
<div>
<span>
<input type="radio" name="IDType" value="IDtype1"/>
ID Type 1
<input type="radio" name="IDType" value="IDtype2"/>
ID Type 2
</span>
<div id="ValidationError" name="ValidationError">
</div>
</div>
<input type="submit" value="Submit" onclick="return Validate();" />
</form>
</body>
</html>

Autres conseils

function validateRadioButtons(){ 
    var radio = $('input:radio[name="IDType"]:checked');
    if(radio.length == 0)//no buttons selected
       {
           $('ValidationError').text("you haven't selected any buttons!");
           return;
       }
    $('ValidationError').text(radio.val()+' is selected');
}

PS: Pour que cela fonctionne, vous devriez envisager d'utiliser des identifiants uniques pour les éléments DOM.Vous ne pouvez pas avoir le même identifiant ("idtype") pour vos deux boutons radio.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top