Validation, champs obligatoires sous conditions

**totot** · 20/02/2014, 21h29

Bonjour,

J'ai un formulaire avec différents et certains sont obligatoire selon ce qu'on sélectionne dans liste.
J'ai fait la fonction suivante, qui se trouve dans un script à part et sa ne fonctionne pas:

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
$(document).ready(function(){
    // validate signup form on keyup and submit
 
    var validator = $("#new").validate({
        errorClass:'has-error',
        validClass:'has-success',
        errorElement:'div',
        highlight: function (element, errorClass, validClass) {
            $(element).closest('.form-control').addClass(errorClass).removeClass(validClass);
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).parents(".has-error").removeClass(errorClass).addClass(validClass);
        },
        rules: {
            date: {
                required: true,
            },
            lieu: {
                required: true,          
            },
            type: {
                required: true,
            },
        },
        messages: {
            date: {
                required: '<span class="help-block">Vous devez sélectionner une date.</span>',
            },
            lieu: {
                required: '<span class="help-block">Vous devez saisir un lieu.</span>',
            },
            type: {
                required: '<span class="help-block">Vous devez sélectionner un type.</span>',
            }
        }
        $("#type").change(function(){
            if ('#type' == 'val1' ||  '#type' == 'val2' || '#type' == 'val3'){
                rules: {
                    champ1: {
                        required: true,
                        number: true,
                    },
                    champ2: {
                        required: true,
                    },
                },
                messages:{
                    champ1: {
                        required: '<span class="help-block">Vous devez saisir.</span>',
                        number: '<span class="help-block">Le champs doit être de type numérique.</span>',
                    },
                    champ2: {
                        required: '<span class="help-block">Vous devez sélectionner un taux.</span>',
                    }
                }
            }
 
            if ('#type' == 'val3'){
                rules:{
                    champ4: {
                        required: true,
                    },
                },
                messages:{
                    champ4: {
                        required: '<span class="help-block">Vous devez préciser d\'avantage le type.</span>',
                    }
                }
            }
 
            if ('#type' == 'val4' || '#type' == 'val5' || '#type' == 'val6'){
                rules:{
                    champ5: {
                        required: true,
                        number: true,
                    },
                },
                messages:{
                    champ5: {
                        required: '<span class="help-block">Vous devez saisir.</span>',
                        number: '<span class="help-block">La saisie doit être de type numérique.</span>',
                    }
                }
            }
        }
    });
});

erreur:

Uncaught SyntaxError: Unexpected identifier

Merci de votre aide

**SpaceFrog** · 21/02/2014, 09h17

sa ne fonctionne

la sienne ??? =>ça ( cela )

Code :

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

  if ('#type' == 'val1' ||  '#type' == 'val2' || '#type' == 'val3')

Je pense que cette condition aura du mal a être vraie un jour ...

**Bovino** · 21/02/2014, 09h23

Ce qui n'est d'ailleurs pas plus mal au vu du code présent dans le if...

**SpaceFrog** · 21/02/2014, 09h35

Je pense que tu confonds avec la syntaxe php de echo conditionnel ...
Javascript attend des instructions dans le if

Code :

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

if(condition) { fais quelque chose ; }

Si je comprends ton code invalide

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
21
22
23
24
25
26
27
28
29
30
31
32
33
if ('#type' == 'val1' ||  '#type' == 'val2' || '#type' == 'val3'){
                rules: {
                    champ1: {
                        required: true,
                        number: true,
                    },
                    champ2: {
                        required: true,
                    },
                },
                messages:{
                    champ1: {
                        required: '<span class="help-block">Vous devez saisir.</span>',
                        number: '<span class="help-block">Le champs doit être de type numérique.</span>',
                    },
                    champ2: {
                        required: '<span class="help-block">Vous devez sélectionner un taux.</span>',
                    }
                }
            }
 
            if ('#type' == 'val3'){
                rules:{
                    champ4: {
                        required: true,
                    },
                },
                messages:{
                    champ4: {
                        required: '<span class="help-block">Vous devez préciser d\'avantage le type.</span>',
                    }
                }
            }

tu essayes de modifier les rules dynamiquement ...
Javascript ne fonctionne absolument pas de ma sorte, tu dois manipuler les propriétés de l'objet, pas balancer du code qui n'a aucun sens au mileu du if ...

un exemple:
http://jsfiddle.net/u4Ee9/2/

en gros toi tu fais :

Code :

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

1
2
3
4
if(true){
    rules :'bonjour',
    qui: "Madame"
}

en tentant de modifier l'objet ... ce qui n'est absolument pas une syntaxe correcte !!!

**totot** · 21/02/2014, 13h49

J'ai même essayé ceci:

Code JS :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
 
$('select[name="type"]').change(function(){
            var type = $(this).val();
            if (type == 'val1' ||  type == 'val2' || type == 'val3'){
                rules: {
                    champ1: {
                        required: true,
                        number: true,
                    },
                    champ2: {
                        required: true,
                    },
                },
                messages:{
                    champ1: {
                        required: '<span class="help-block">Vous devez saisir un montant.</span>',
                        number: '<span class="help-block">Le montant doit être de type numérique.</span>',
                    },
                    champ2: {
                        required: '<span class="help-block">Vous devez sélectionner un taux de TVA.</span>',
                    }
                }
            }
 
            if (type == 'val3'){
                rules:{
                    champ3: {
                        required: true,
                    },
                },
                messages:{
                    champ3: {
                        required: '<span class="help-block">Vous devez préciser d\'avantage le type de frais.</span>',
                    }
                }
            }
 
            if (type == 'val4' || type == 'val5' || type == 'val6'){
                rules:{
                    champ4: {
                        required: true,
                        number: true,
                    },
                },
                messages:{
                    champ4: {
                        required: '<span class="help-block">Vous devez saisir un coût total.</span>',
                        number: '<span class="help-block">Le coût total doit être de type numérique.</span>',
                    }
                }
            }
        });

**Bovino** · 21/02/2014, 15h20

Le code que tu mets dans le if n'est pas du JavaScript valide !
Tu lis les réponses au moins ? On te l'a dit plusieurs fois !

**totot** · 21/02/2014, 15h23

Bah si je lis ce que vous mettez mais je vois pas comment faire

**totot** · 21/02/2014, 15h58

Je viens de suivre ce lien mais toujours pareil:
http://www.developpez.net/forums/d85...us-conditions/

Code JS :

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
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
$(document).ready(function(){
    // validate signup form on keyup and submit
 
    var validator = $("#new").validate({
        errorClass:'has-error',
        validClass:'has-success',
        errorElement:'div',
        highlight: function (element, errorClass, validClass) {
            $(element).closest('.form-control').addClass(errorClass).removeClass(validClass);
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).parents(".has-error").removeClass(errorClass).addClass(validClass);
        },
        rules: {
            date: {
                required: true,
            },
            lieu: {
                required: true,          
            },
            type: {
                required: true,
            },
        },
        messages: {
            date: {
                required: '<span class="help-block">Vous devez sélectionner une date.</span>',
            },
            lieu: {
                required: '<span class="help-block">Vous devez saisir un lieu.</span>',
            },
            type: {
                required: '<span class="help-block">Vous devez sélectionner un type.</span>',
            }
        },
    });
 
    $("#type").change(function(){
        var type = $(this).val();
        if (type == 'val1' ||  type == 'val2' || type == 'val3'){
            $("#champ1").rules("add", {
                required: true,
                number: true,
                messages: {
                    required: '<span class="help-block">Vous devez saisir une valeur.</span>',
                    number: '<span class="help-block">La valeur doit être de type numérique.</span>',
                }
            });
 
            $("#champ2").rules("add", {
                required: true,
                messages: {
                    required: '<span class="help-block">Vous devez sélectionner un taux.</span>',
                }
            });
        }
 
        if (type == 'val3'){
            $("#champ3").rules("add", {
                required: true,
                messages: {
                    required: '<span class="help-block">Vous devez préciser d\'avantage le type.</span>',
                }
            });   
        }
 
        if (type == 'val4' || type == 'val5' || type == 'val6'){
            $("#champ4").rules("add", {
                required: true,
                number: true,
                messages: {
                    required: '<span class="help-block">Vous devez saisir une valeur.</span>',
                    number: '<span class="help-block">La valeur doit être de type numérique.</span>',
                }
            });   
        }
    });
});

**Bovino** · 21/02/2014, 16h07

Code :

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

if (type == 'val1' ||  type == 'val2' || type == 'val3')

Tu es sûr que tu veux comparer avec la valeur du select ?

Il faudrait nous montrer le code HTML en rapport...

**totot** · 21/02/2014, 16h11

Oui,
Selon la valeur sélectionnée dans la liste, je veux souhaite rendre tel champs obligatoire

Code php :

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
21
22
23
24
 <div class="col-md-12 field-box">
    <label for="type">Type :<span class="help-required"></span></label>
    <div class="col-md-9 col-md-push-1">
        <select style="width:250px" class="select2 type required" id="type" name="type" aria-required="true" onchange="reinit();">
            <option></option>    
<?php
//Appel de la fonction pour récupérer les valeur possible d'un champ type enum
$enumFields = getEnumFieldValues('detail', 'type', $connexion);
foreach($enumFields as $value):
    $value=str_replace("'","",$value);
    if($value == $type):
?>
            <option value="<?php echo $value ?>" selected="selected"><?php echo $value; ?></option> 
<?php
    else:
?>
            <option value="<?php echo $value ?>"><?php echo $value ?></option>    
<?php
    endif;
endforeach;   
?>    
        </select>
    </div>
</div>

**Bovino** · 21/02/2014, 16h24

LE CODE HTML ! On en à rien à faire du PHP en JavaScript !

Important : Les règles incontournables d'utilisation de ce forum !

**totot** · 21/02/2014, 16h27

Tu souhaite le code html de quoi? De la liste type, des champs qui dépendent de la liste ?

**SpaceFrog** · 21/02/2014, 16h29

Si tu essayais de nous montrer le code HTML de la liste de courses de la soeur du voisin de ma grand mère ?

**totot** · 21/02/2014, 16h34

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
<div class="col-md-12 field-box">
<label for="type">Type:<span class="help-required"></span></label>
    <div class="col-md-9 col-md-push-1">
        <select style="width:250px" class="select2 type required" id="type" name="type" aria-required="true" onchange="reinit();">
            <option></option>    
            <br />
            <option value="val1">val1</option>    
            <option value="val2>val2</option>    
            <option value="val3">val3</option>    
            <option value="val4">val4</option>    
            <option value="val5">val5</option>    
            <option value="val6">val6</option>    
        </select>
    </div>
</div>

**SpaceFrog** · 21/02/2014, 16h35

Code html :

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

1
2
3
 <select style="width:250px" class="select2 type required" id="type" name="type" aria-required="true" onchange="reinit();">
    <option></option>    
    <br />

y'a pas à dire ...
la maxi classe

**totot** · 21/02/2014, 16h42

Je comprend pas ce que tu veux dire

**SpaceFrog** · 21/02/2014, 17h24

Ben juste que ton code html ne tiens pas la route ...

**totot** · 21/02/2014, 17h27

Pourquoi aussi?

**totot** · 21/02/2014, 22h56

J'ai quasiment trouvé.
J'ai juste un problème quand j'ajoute un controle:
Uncaught TypeError: Cannot read property 'nodeType' of undefined

Code JS :

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

1
2
3
4
5
6
7
8
if (type == 'val3'){
            $("#champ3").rules("add", {
                required: true,
                messages: {
                    required: '<span class="help-block">Vous devez préciser d\'avantage le type.</span>',
                }
            });   
        }

Validation, champs obligatoires sous conditions

jQuery

Discussions similaires

Partager

Partager