Discussion :

[Dendrite]

Bonjour,

Voici mon problème : j'aimerais que mon ajax.js ne se lance que quand HTML a terminé son travail de validation sur le formulaire COMPLET.

voici ma page ajax.js
Ici, c'est un bac à sable, mais à terme, j'ai plusieurs pages de longs formulaires assez rasoirs, alors je veux ne pas mettre de submit, ni bouton, ni input.
Je pose donc partout des événements "blur"...
Le problème est le suivant :

- champ login required
- champ age (facultatif)
- champ genre (required)
- champ artiste_prefere (required)
- champ legume_prefere (facultatif)


Le formulaire se présentant dans cet ordre.
Et mettons que user le remplit dans l'ordre, comme la plupart du temps, je souhaiterais qu'il se passe ceci à l'événement onblur()

login (j'enregistre pas)
age (j'enregistre pas)
genre (j'enregistre pas)
artiste_prefere (j'enregistre tout car tous les champs required sont là)
legume_prefere (j'enregistre tout car tous les champs required sont là)

Vous voyez le truc ?

J'ai fini par régler le problème du côté de ma page "form_traitement.php".
Alors ok, je fais toujours le contrôle de saisie côté serveur, OK.
Mais là, côté client, je perds les bénéfs du contrôle de saisie HTML5. Sans compter qu'ici, je ne parle que de "required", mais il y en a bien d'autres, des contrôles HTML5.
Bref, suis pas trop contente.

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
/*si on active listener alors event : variable post envoyee vers traitement.php*/
$(document).ready(function(){
  $('.save').blur(function(e){
    e.preventDefault();
    $.post(
      'form_traitement.php',
      {
        login : $('#login').val(),
        age : $('#age').val(),
        genre : $('#genre').val(),
        artiste_prefere : $('#artiste_prefere').val(),
        legume_prefere : $('# legume_prefere').val(),
      },
      function(data){
        if(data == 'ok'){
          $('#feedback').html('<p class="feedback_ok">La modification a bien été enregistrée !</p>');
        }
        else if(data == 'ko'){
          $('#feedback').html('<p class="feedback_ko">La modification n\'a pas été enregistrée !</p>');
        }
      },
      'text' //il faut afficher le text
    );
  });
});

[Toufik83]

Salut,

Je ne sais pas si j'ai vraiment bien compris le problème, mais tu peux quand même vérifier tes contrôles avec $.each par exemple :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
$('.save').blur(function(e){
    e.preventDefault();
    let valide=true;
    $("#login,#age,#genre,#artiste_prefere,#legume_prefere").each(function(){
       if($(this).attr("required") && $(this).val().trim()==""){
           valide=false;
      }
   });
   if(valide){
       //lance ton ajax ici ...
   }
});