[JavaScript] Vérifier la validité d'un formulaire avant sa soumission
Publié le 17/06/2019 • Actualisé le 20/04/2020
Il est désormais courant de proposer un formulaire aux utilisateurs en plusieurs étapes. Généralement on construit un seul formulaire et on affiche certains champs en fonction de l'étape en cours. Donc, si on a un bouton "étape suivante", celui ne va pas déclencher la soumission du formulaire et la validation HTML5 ne sera donc pas effectuée. Ça peut être problématique sur la dernière étape si l'utilisateur soumet le formulaire mais que certains champs des précédentes étapes ne sont pas valides. La validation sera bien déclenchée, mais comme les champs des précédentes étapes ne sont pas affichés, l'utilisateur ne verra pas non plus les erreurs relatives et ne comprendra pas pourquoi il reste bloqué sur la dernière étape. Cette fonction va donc nous permettre de vérifier si le formulaire est bien valide afin d'accéder à l'étape suivante. Si ce n'est pas le cas, nous pouvons forcer la soumission du formulaire puisque nous savons que celui-ci n'est pas valide : l'appel va donc forcer l'affichage des erreurs de validation sur l'étape en cours.
[Maj 20/04/2020] Ajouté une vrai démo Vue.js.
/**
* J'utilise un module JavaScript afin d'isoler chaque snippet dans un fichier.
* C'est en fait un mixin Vue.js. Utilisez le code appelé par la fonction mounted()
* ou snippetXX().
*/
export default {
data: {
snippetFeedback: ''
},
methods: {
snippet28: function () {
if (!this.$refs.myForm.checkValidity()) {
this.$refs.myFormSubmit.click()
this.snippetFeedback = 'Form is NOT valid. Enter a value.'
} else {
this.snippetFeedback = 'Form is valid.'
}
// That's it! 😁
}
}
}
Plus sur Stackoverflow Lire la doc Snippet aléatoire
