web-dev-qa-db-fra.com

Validation du bouton radio en javascript

Nécessité de valider une entrée de bouton radio, c.-à-d. Que lorsque le bouton d'envoi est activé et qu'aucun bouton d'option n'a été sélectionné, il en avertit l'utilisateur en lui demandant de sélectionner une case à cocher. Si un bouton d'option a été sélectionné, il vous suffit de soumettre le formulaire souhaité. pas d'alerte.

Je ne peux utiliser que HTML CSS et JavaScript pour cela, je sais que jQuery est 1000 fois plus facile, mais malheureusement, je ne peux pas l'utiliser. 

Et je sais que mon code HTML n'est pas valide, mais à moins que cela n'affecte directement mon problème actuel, je le traiterai plus tard.

<form name="form1" action="#" onsubmit="return validateForm()" method="post"> 

    First time visitor?:<br/>
            <label for="s1">Yes</label>
            <input type="radio" id="1" name="yesno" value="1"/>
            <br/>
            <label for="s2">No</label>
            <input type="radio" id="1" name="yesno" value="2"/>

            <br/>       

    <input type="submit" value="Submit"><br/>
    </form>

Tous les pointeurs sont grandement appréciés, merci.

javascriptvalidationclient-side-validation
6
user1359421

1er: Si vous savez que votre code n'est pas correct, vous devriez le corriger avant de faire quoi que ce soit!

Vous pouvez faire quelque chose comme ça:

function validateForm() {
    var radios = document.getElementsByName("yesno");
    var formValid = false;

    var i = 0;
    while (!formValid && i < radios.length) {
        if (radios[i].checked) formValid = true;
        i++;        
    }

    if (!formValid) alert("Must check some option!");
    return formValid;
}​

Voyez-le en action: http://jsfiddle.net/FhgQS/

15
MatuDuke

Exemple de validation complète avec javascript:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Radio button: full validation example with javascript</title>
        <script>
            function send() {
                var genders = document.getElementsByName("gender");
                if (genders[0].checked == true) {
                    alert("Your gender is male");
                } else if (genders[1].checked == true) {
                    alert("Your gender is female");
                } else {
                    // no checked
                    var msg = '<span style="color:red;">You must select your gender!</span><br /><br />';
                    document.getElementById('msg').innerHTML = msg;
                    return false;
                }
                return true;
            }

            function reset_msg() {
                document.getElementById('msg').innerHTML = '';
            }
        </script>
    </head>
    <body>
        <form action="" method="POST">
            <label>Gender:</label>
            <br />
            <input type="radio" name="gender" value="m" onclick="reset_msg();" />Male
            <br />
            <input type="radio" name="gender" value="f" onclick="reset_msg();" />Female
            <br />
            <div id="msg"></div>
            <input type="submit" value="send>>" onclick="return send();" />
        </form>
    </body>
</html>

Cordialement,

Fernando

8
Fernando

Vous pourriez faire quelque chose comme ça 

var option=document.getElementsByName('Gender');

if (!(option[0].checked || option[1].checked)) {
    alert("Please Select Your Gender");
    return false;
}
1
Akash_Sahu
<form action="" method="post" name="register_form" id="register_form" enctype="multipart/form-data">

    <div class="text-input">
        <label>Gender: </label>
        <input class="form-control" type="radio" name="gender" id="male" value="male" />
        <label for="male">Male</label>
        <input class="form-control" type="radio" name="gender" id="female" value="female" />
        <label for="female">Female</label>
    </div>
    <div class="text-input" align="center">
        <input type="submit" name="register" value="Submit" onclick="return radioValidation();" />
    </div>

</form>

<script type="text/javascript">
    function radioValidation(){

        var gender = document.getElementsByName('gender');
        var genValue = false;

        for(var i=0; i<gender.length;i++){
            if(gender[i].checked == true){
                genValue = true;    
            }
        }
        if(!genValue){
            alert("Please Choose the gender");
            return false;
        }

    }
</script>

Source: http://chandreshrana.blogspot.in/2016/11/radio-button-validation-in-javascript.html

1
Chandresh
document.forms[ 'forms1' ].onsubmit = function() {
    return [].some.call( this.elements, function( el ) {
        return el.type === 'radio' ? el.checked : false
    } )
}

Juste quelque chose hors de ma tête. Pas sûr que le code fonctionne.

0
Florian Margaine

En plus des solutions Javascript ci-dessus, vous pouvez également utiliser une solution HTML 5 en cochant les boutons radio comme requis dans le balisage. Cela éliminera le recours à Javascript et laissera le navigateur faire le travail pour vous.

Voir HTML5: Comment utiliser l'attribut "required" avec un champ de saisie "radio" pour plus d'informations sur la procédure à suivre.

0
Jonathan Geisler