Validation checkbox multiples avec jquery

**sala69** · 13/07/2014, 12h09

Bonjour , je suis entrain d'apprendre la validation de formulaires avec jquery mais je suis bloqué dans le cas ou il y'a 2 checkbox multiple , je voudrais que si l'une de deux checkbox n'est pas validé un message d'erreur soit affiché. dans mon cas si une des deux checkbox est sélectionné ,le message d'erreur ne s'affiche pas et le formulaire est soumise.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <style type="text/css">
        label.error {
            float: none; color: red;
            padding-left: .3em; vertical-align: top;
        }
    </style>
    <script type="text/javascript"
            src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js">
    </script>
    <script type="text/javascript" src="
http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js">
    </script>
    <script type="text/javascript">

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
        $.validator.addMethod('onecheck', function(value, ele) {
            return $("input:checked").length >= 1;
        }, 'Please Select Atleast One CheckBox')
 
        $(document).ready(function() {
            $("#form1").validate({
                rules: {
                    'bev[]': {
                        onecheck: true
                    },
                    'bev2[]': {
                        onecheck: true
                    }
                },
                errorPlacement: function(error, element) {
                    error.appendTo('#err');
                }
            });
 
        });

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
    </script>
    <title></title>
</head>
<body>
<form id="form1">
    <div id="chkboxes">
        <input type="checkbox" name="bev[]" value="cream" />With cream<br />
        <input type="checkbox" name="bev[]" value="sugar" />With sugar<br />
        <input type="checkbox" name="bev2[]" value="sugar" />With sugar<br />
        <input type="checkbox" name="bev2[]" value="sugar" />With <br />
    </div>
    <div id="err"></div>
    <input id="btnSubmit" type="submit" value="submit" />
</form>
</body>
</html>

Merci de m'aider svp

**micetf** · 13/07/2014, 16h50

L'argument "ele" reçu par la méthode onecheck est un input.
Il faut utiliser son nom pour faire le test.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('input[name=' + ele.name + "]:checked").length >= 1

En tout état de cause, le test que tu réalises : $("input:checked").length >= 1
Renvoie true dès lors qu'une checkbox est cochée.

Un test ici : http://jsfiddle.net/MiCetF/GZ26a/

**sala69** · 18/07/2014, 09h29

Rebonjour la solution que tu m'as proposé marche en parti , en fait si il y'a deux checkbox multiples si tu valide l'un des deux , le formulaire est soumis.
Merci de ta réponse de la dernière fois , je m'excuse du temps que j'ai fait pour te relancer.

Validation checkbox multiples avec jquery

jQuery

Discussions similaires

Partager

Partager