Donc, ce dont j'ai besoin, c'est simplement d'une alerte qui s'affiche lorsque ma validation html5 échoue, comme:

alert("Error, please fill all required fields before submitting.");

Y a-t-il une sorte d'événement que je pourrais utiliser pour afficher cette alerte en utilisant JavaScript ou jQuery?

Cela semble vraiment basique, mais je n'ai rien trouvé en ligne à ce sujet. Tout ce que je peux trouver, ce sont des moyens de modifier le message contextuel qui apparaît directement sur le champ.

J'en ai besoin car mes formulaires s'étendent sur plusieurs onglets, de sorte que la bulle affichant un message d'erreur peut ne pas toujours apparaître selon l'endroit où se trouve l'utilisateur lorsqu'il soumet le formulaire.

7
CoqPwner 16 juil. 2015 à 16:54

4 réponses

Meilleure réponse

Il y a invalid événement déclenché sur les entrées si elles ne passent pas la validation: https://developer.mozilla.org/en-US/docs/Web/Events/invalid

En utilisant jQuery, vous pourriez faire quelque chose comme ceci:

$('input[required]').on('invalid', function(e){
  alert("Error, please fill all required fields before submitting.");
});

http://jsfiddle.net/644Lou8k/1/

13
pawel 16 juil. 2015 à 14:01

La validation HTML5 intervient lorsque l'utilisateur soumet le formulaire et ne déclenche aucun événement. La seule façon est d'avoir votre propre validation JS comme beaucoup d'autres l'ont mentionné dans leurs réponses. Voici une bonne réponse La validation HTML5 requise ne fonctionne pas

Le processus de validation du formulaire HTML5 est limité aux situations où le formulaire est envoyé via un bouton d'envoi. L'algorithme de soumission de formulaire indique explicitement que la validation n'est pas effectuée lorsque le formulaire est soumis via la méthode submit (). Apparemment, l'idée est que si vous soumettez un formulaire via JavaScript, vous êtes censé faire la validation

-1
Community 23 mai 2017 à 12:01

Vous pouvez capturer l'événement de soumission de formulaire à l'aide de javascript et valider / vérifier les valeurs avant de le laisser passer.

$('form').submit(function () {
  if($('#blah').val() == "") {
    alert('blahblah');
    return false;
  }
});
-2
jdu 16 juil. 2015 à 14:01

Pour ceux qui ne veulent pas utiliser jQuery:

var requiredInput = document.getElementById('requiredField');

function showAlert(){
  alert("Error, please fill all required fields before submitting.");
}

requiredInput.addEventListener("invalid", showAlert, false);
<form action="">
  <input id="requiredField" type="text" placeholder="Required input" required>
  <button type="submit">Submit</button>
</form>
4
Junaid Anwar 12 mars 2018 à 11:22