[JavaScript] Vérifier la validité d'un formulaire avant sa soumission

Publié le 17/06/2019 • Mis à jour le 17/06/2019

English language detected! 🇬🇧

  We noticed that your browser is using English. Do you want to read this post in this language?

Read the english version 🇬🇧

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.


<script>
    // https://www.w3schools.com/js/js_validation_api.asp (hit the doc button)
    function nextStep() {
        let form = $('#myform');
        if (!form[0].checkValidity()) {
            form.find(':submit').click();
            alert('Please check all fields value before going to the next step.')

            return false;
        }
        // ... go to next step. hide step 1 and display step 2 for example...
    }
    // That's it! 😁
</script>

 Plus sur Stackoverflow   Lire la doc