Annulation d'un submit pour les champs non valides

Version imprimable

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:

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>

25/08/2016, 13h36
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:

1 2 3 4 5 6 $(".......").submit(function(e){ e.preventDefault(); ... });
et cela va bloquer l'envois du formulaire.

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:

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();
 
                    });
                }
            }

met des alert un peu partout et tu verras bien :

Code:

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();

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:

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;
                }
            }

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

Code:

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:

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>

25/08/2016, 23h13
BOUHH37

Effectivement c'est plus optimisé 😉

merci 😊