Affichage de message d'erreur

Fermé
abirgl Messages postés 127 Date d'inscription lundi 31 octobre 2016 Statut Membre Dernière intervention 20 juin 2017 - 9 déc. 2016 à 12:14
abirgl Messages postés 127 Date d'inscription lundi 31 octobre 2016 Statut Membre Dernière intervention 20 juin 2017 - 9 déc. 2016 à 15:45
Bonjour,
Je veux afficher un message d'erreur lorsqu'une valeur incorrecte est saisie
J'explique ; J'ai un formulaire contenant un champ Heure Début de Travail et un champ Heure fin de Travail , si l'utilisateur saisit dans le champ heure fin de travail une heure inférieure à celle saisie dans le champ heure début un message d'erreur s'affiche.
Les valeurs saisies seront enregistrées en Base de données, je vous dit comment j'ai procédé, dans ma balise <form action ='insertion.php' > Dans la page insertion.php j'ai récupéré les valeurs saisies par $_POST et j'ai fais les tests pour que j'insère des valeurs correctes dans ma base, ceci fonctionne sauf que les messages d'erreurs s'affichent qu'après avoir validé l'ajout (après appui sur le bouton sauvegarder) : Mon besoin c'est afficher le message d'erreur dès que l'utilisateur tape une valeur incorrecte (avant de cliquer sur le bouton sauvegarder)
J'espère que vous pourrez m'aider et je vous remercie d'avance


1 réponse

Pitet Messages postés 2826 Date d'inscription lundi 11 février 2013 Statut Membre Dernière intervention 21 juillet 2022 525
9 déc. 2016 à 14:16
Salut,

Coté client en javascript, une première solution est :
1. Ajouter une fonction qui sera déclenchée lorsque l'utilisateur clique sur le bouton submit via la fonction addEventListener (ne pas oublier l'appel de preventDefault pour empêcher l'envoi du formulaire)
2. Dans cette fonction, créer deux objets de type Date en récupérant les valeurs saisies par l'utilisateur dans le formulaire.
3. Comparer ces deux dates et afficher un message d'erreur ou envoyer le formulaire selon le résultat de la comparaison.

Exemple :
<form id="form1">
  <input type="date" name="date-debut" required>
  <input type="date" name="date-fin" required>
  <input type="submit">
</form>

document.getElementById('form1').addEventListener('submit', function(e){
  e.preventDefault();

  var dateDebut = new Date(document.querySelector('#form1 [name="date-debut"]').value);
  var dateFin = new Date(document.querySelector('#form1 [name="date-fin"]').value);

  if (dateDebut >= dateFin) {
    alert('Date début supérieur à date fin');
  } else {
    this.submit();
  }
})


Cela ne dispense pas de faire la vérification coté serveur en php car l'utilisateur peut facilement contourner ou désactiver la vérification en javascript.

Bonne journée,
0
abirgl Messages postés 127 Date d'inscription lundi 31 octobre 2016 Statut Membre Dernière intervention 20 juin 2017
9 déc. 2016 à 15:45
Merci Pitet mais ça n'a rien affiché :(
0