18041 sujets

Questions générales et questions de débutants

[Résolu] Trous de mémoire

Bonjour à tous
Cela fait très longtemps que je n'ai pas écrit de <form> et il y a plusieurs points dont je ne me souviens plus à propos de la validation du formulaire, d'autant que mon style de programmation a fortement évolué en utilisant les possibilités de CSS3 et la gestion des événements par JavaScript.

1 - pour lancer la validation, j'ai écrit
myForm.addEventLister('submit', checkForm);

Dans l'écriture de la fonction checkForm(event), je me suis rendu compte qu'il fallait mettre
event.preventDefault();
sinon la forme est envoyée quel que soit le résultat de la validation, le "return false" n'a aucun effet.
Mais alors, quand c'est OK comment lancer l'envoi de la forme ? Si je fais 
myForm.submit()
je vais tourner en rond...
Edit: j'ai réglé ce premier point

2 - pour afficher le message d'erreur, je voudrais mettre la fenêtre du message modale, c'est à dire mettre un cache translucide sur la page tant que le message est affiché.
J'ai écrit

#message {display:none}
#message.active {
    display:block;
    ...
}
#message.active::before {
    position:fixed;
    left:0;
   top:0;
   width:100vw;
   height:100vh;
   background: rgba(0, 0, 0, 0.25);
}

Je constate sans comprendre que le cache ne s'affiche pas quand le message devient actif.

Merci pour votre aide.
Edit: j'ai réglé le premier point, reste le deuxième
Modifié par PapyJP (29 Sep 2021 - 11:57)
Salut,

pour le 1 :

je me trompe peut être vu que je n'ai pas testé, mais cela m'a l'air d’être plus simple de raisonner à l'envers Smiley ohwell :
- Tu fais tes vérifications, et seulement si cela ne fonctionne pas tu fais ton event.preventDefault();


Edit : Je viens de voir l'edit en envoyant mon message Smiley bawling
Modifié par Mathieuu (29 Sep 2021 - 12:01)
Meilleure solution
Modérateur
Hello,

Si tu ne sais pas gérer la validation de form, je te suggère d'utiliser required. C'est simple et efficace (si, on n’est pas vraiment regardant sur le design graphique attendu)


<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation-float.min.css" integrity="sha256-4ldVyEvC86/kae2IBWw+eJrTiwNEbUUTmN0zkP4luL4=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation-prototype.min.css" integrity="sha256-BiKflOunI0SIxlTOOUCQ0HgwXrRrRwBkIYppEllPIok=" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.6.3/dist/css/foundation-rtl.min.css" integrity="sha256-F+9Ns8Z/1ZISonBbojH743hsmF3x3AlQdJEeD8DhQsE=" crossorigin="anonymous">

<style>
    .container{
        max-width: 600px;
        margin: 50px auto;
        border: 1px solid #eee;
        border-radius: 3px;
        padding: 15px;
    }
    .button{
        width: 100%;
    }
    .grid-x{
        align-items: end;
    }
</style>

</head>
<body>
    <form action="controller" class="container" id="registry">
        <div className="grid-container">
            <div class="grid-x grid-padding-x">
                <div class="cell medium-6">
                    <label for="firstname">prénom</label>
                    <input type="text" required name="firstname" id="firstname" />
                </div>
                <div class="cell medium-6">
                    <button type="submit" class="button">envoyer</button>
                </div>
            </div>
        </div>
    </form>
    <script>
        (()=>{
            let firstname = document.getElementById('firstname');
            firstname.addEventListener('invalid', ()=>{
                firstname.setCustomValidity('champ obligatoire')
            }, false);
            firstname.addEventListener('input', ()=>{
                firstname.setCustomValidity('');
            }, false);
            document.getElementById('registry').addEventListener('submit', (event)=> {
                if (!event.target.checkValidity()) {
                    event.preventDefault();
                }
            }, false);
        })()
    </script>
</body>
</html>

Modifié par niuxe (29 Sep 2021 - 14:40)
Whahhh!!!
un peu compliqué à mon goût, c’est quoi tous ces fichiers externes ?
Personnellement je ne me fie pas à des fichiers externes dont le contenu peut changer sans préavis et qui nécessitent d’apprendre à s’en servir.

Comme je l’ai dit, je suis arrivé à faire marcher la validation mais je n’ai toujours pas trouvé la solution au message d’erreur dans une boîte modale.
Mathieuu a écrit :

- Tu fais tes vérifications, et seulement si cela ne fonctionne pas tu fais ton event.preventDefault();

Voilà une idée qui me semble très bonne. Je vais essayer !
PapyJP a écrit :

Voilà une idée qui me semble très bonne. Je vais essayer !

J'ai essayé, c'est tout à fait ce que je cherchais!
Merci beaucoup.

Je vais rouvrir un sujet pour le 2ème problème.
Modérateur
PapyJP a écrit :

Pourquoi faire simple quand on peut faire compliqué ? Smiley smile


Tu as une mise en forme. Je suis sur un sujet où zurb foundation est prérequis (j'ai ouvert un template pour répondre à ton sujet). Comme alternative à bootstrap, c'est pas mal.

Pour finir, il n'y a rien de compliqué sur ce code. si tu lis mon validateur de données, ce serait déjà une autre paire de manches.
Modifié par niuxe (30 Sep 2021 - 04:33)
Sujet clos
Aller à