Discussion :

[BOUHH37]

Bonjour,

J'ai un formulaire avec des contraintes sur les champs et j'aimerais que cela bloque la requête d'insertion si les champs ne sont pas valide.

J'ai utilisé des fonctions js tiré d'un exemple, donc je pense qu'elle fonctionne, le problème doit venir de la form de Symfony.

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
 
{{ form_start(form, {'attr': {'class': 'formoid-solid-green formbootstrapcustom', 'onSubmit':'return verifForm()'}}) }}
        <div class="row">
            <div class="col-md-5 col-md-offset-1">
                <div class="element-input">
                    <label class="title">
                        {#<span class="required">*</span>#}
                    </label>
                    <div class="item-cont">
                        {{ form_errors(form.name) }}
                        {{ form_widget(form.name, {'attr': {'onblur':'return verifPseudo(this)'}}) }}
                        <span class="icon-place"></span>
                    </div>
                </div>
            </div>
 
...
 
 
 <div class="submit"><input type="submit" value="Envoyer"/></div>
        {{ form_rest(form) }}
        {{ form_end(form) }}
 
 
<script>
 
            function surligne(champ, erreur)
            {
                if(erreur)
                    champ.style.backgroundColor = "#fba";
                else
                    champ.style.backgroundColor = "";
            }
 
            function verifPseudo(champ)
            {
                if(champ.value.length < 2 || champ.value.length > 25)
                {
                    surligne(champ, true);
                    return false;
                }
                else
                {
                    surligne(champ, false);
                    return true;
                }
            }
 
            function verifMail(champ)
            {
                var regex = /^[a-zA-Z0-9._-]+@[a-z0-9._-]{2,}\.[a-z]{2,4}$/;
                if(!regex.test(champ.value))
                {
                    surligne(champ, true);
                    return false;
                }
                else
                {
                    surligne(champ, false);
                    return true;
                }
            }
 
            function verifForm(f)
            {
                var pseudoOk = verifPseudo(f.pseudo);
                var mailOk = verifMail(f.email);
 
                if(pseudoOk && mailOk)
                    return true;
                else
                {
                    alert("Veuillez remplir correctement tous les champs");
                    return false;
                }
            }
 
 
        </script>

[dukoid]

tu veux dire que lors de l'appuis sur ENVOYER le formulaire est validé et n’exécute pas la fonction javascript verifSubmit ?

si c'est le cas, tu mets ça :

Code :

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

1
2
3
4
5
6
 
$(".......").submit(function(e){
     e.preventDefault();
 
    ...
});

et cela va bloquer l'envois du formulaire.

[BOUHH37]

Merci pour ta réponse 😊, Mais cela ne marche pas 😞

J'ai inclut ta méthode dans ma fonction verifForm(), aucun changement, il n'arrive pas à passer dans le else. Enfaite je me demande si il execute la fonction verifForm() ?

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
 
function verifForm(f)
            {
                var pseudoOk = verifPseudo(f.pseudo);
                var mailOk = verifMail(f.email);
 
                if(pseudoOk && mailOk)
                    return true;
                else
                {
                    $("form").submit(function(e){
                        e.preventDefault();
 
                    });
                }
            }

[dukoid]

met des alert un peu partout et tu verras bien :

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
 
function verifForm(f)
            {
 
alert("in");
                var pseudoOk = verifPseudo(f.pseudo);
                var mailOk = verifMail(f.email);
 
                if(pseudoOk && mailOk) {
alert(true);
                    return true;
                } else
                {
alert(false);
                    $("form").submit(function(e){
                        e.preventDefault();

[BOUHH37]

Bon, j'ai changé totalement de méthode et cela fonctionne, je sais pas si c'est très optimisé mais pour le moment ca ira, si toute fois quelqu'un à une alternatif, n'hésitez pas. Je poste le code pour ceux qui sont dans la même situation 😉

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
function validForm(){
                form_name=document.forms['recruting'].elements['recruting[name]'];
                form_lastName=document.forms['recruting'].elements['recruting[lastName]'];
                form_mail=document.forms['recruting'].elements['recruting[mail]'];
                form_birthDate=document.forms['recruting'].elements['recruting[birthDate]'];
                form_mobile=document.forms['recruting'].elements['recruting[mobile]'];
                form_city=document.forms['recruting'].elements['recruting[city]'];
                form_cp=document.forms['recruting'].elements['recruting[cp]'];
                form_comment=document.forms['recruting'].elements['recruting[comment]'];
 
 
                if(form_name.value == "") {
                    alert("Saisissez le nom");
                    return false;
                } else if(form_lastName.value == "") {
                    alert("Saisissez le prénom");
                    return false;
                }else if(form_mail.value == "") {
                    alert("Saisissez le mail");
                    return false;
                }else if(form_birthDate.value == "") {
                    alert("Saisissez la date de naissance");
                    return false;
                }else if(form_mobile.value == "") {
                    alert("Saisissez le  numéro de téléphone");
                    return false;
                }else if(form_city.value == "") {
                    alert("Saisissez la ville");
                    return false;
                }else if(form_cp.value == "") {
                    alert("Saisissez le code postal");
                    return false;
                }else if(form_comment.value == "") {
                    alert("Saisissez votre motivation");
                    return false;
                }else{
                    return true;
                }
            }

[MehrezLabidi]

tu pouvais le faire beaucoup mieux a mon avis.
la première des choses , tu as écris par exemple

Code :

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

  if(form_name.value == "")

alors que le caractère espace peux échapper
encore plus , si tu va alerter l'utilisateur 3 fois parce qu'il a 3 champs vide ca sera pas pratique.
Je redis encore , a mon avis.
Par contre , d'habitude je fais comme dessous:

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
 
    <script type="text/javascript">
///
   var arrayOfErrors = [];// array d erreur
   if(form_name.value.trim.length <1) {   arrayOfErrors.push("Saisissez le nom");}
   if(form_lastName.value.trim.length <1) {   arrayOfErrors.push("Saisissez le prénom");}             
    //
  if ((arrayOfErrors.length == 0) {
        return true;
}        else{
var msg="";
for(var i= 0; i < x.arrayOfErrors; i++)
{
     msg = msg+(arrayOfErrors[i]);
}
alert(msg);
return false;
 
}     
 </script>

[BOUHH37]

Effectivement c'est plus optimisé 😉

merci 😊