Last active
October 10, 2019 09:18
-
-
Save alepee/ef5dbc6479496a0efe04993b9b821f8b to your computer and use it in GitHub Desktop.
DOM is Fantastic - Validation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <title>Mon formulaire</title> | |
| <link | |
| rel="stylesheet" | |
| href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" | |
| integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" | |
| crossorigin="anonymous" | |
| /> | |
| </head> | |
| <body> | |
| <header | |
| class="container jumbotron" | |
| style="height: 300px;background-image: url('https://static1.evcdn.net/images/reduction/1504403_w-1980_h-620_q-70_m-crop.jpg'); background-size: cover" | |
| > | |
| <h1>Réservation</h1> | |
| </header> | |
| <div class="container"> | |
| <form id="booking" action="#" method="PUT" autocomplete="off"> | |
| <fieldset> | |
| <legend>Identité</legend> | |
| <div class="row"> | |
| <div class="col"> | |
| <div class="form-group"> | |
| <label for="firstname">Prénom</label | |
| ><input | |
| class="form-control" | |
| id="firstname" | |
| name="firstname" | |
| type="text" | |
| required | |
| /> | |
| <div | |
| class="invalid-feedback" | |
| hidden | |
| style="display: block" | |
| ></div> | |
| </div> | |
| </div> | |
| <div class="col"> | |
| <div class="form-group"> | |
| <label for="lastname">Nom</label | |
| ><input | |
| type="text" | |
| id="lastname" | |
| class="form-control" | |
| name="lastname" | |
| required | |
| /> | |
| <div | |
| class="invalid-feedback" | |
| hidden | |
| style="display: block" | |
| ></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <div class="col"> | |
| <div class="form-group"> | |
| <label for="birthdate" | |
| >Date de naissance | |
| <small class="form-text text-muted" | |
| >Vous devez être agé de 18 ans ou plus | |
| pour procéder à un enregistrement</small | |
| ></label | |
| ><input | |
| type="date" | |
| id="birthdate" | |
| class="form-control" | |
| name="birthdate" | |
| max="2001-01-01" | |
| required | |
| /> | |
| <div | |
| class="invalid-feedback" | |
| hidden | |
| style="display: block" | |
| ></div> | |
| </div> | |
| </div> | |
| <div class="col"></div> | |
| </div> | |
| </fieldset> | |
| <hr /> | |
| <fieldset> | |
| <legend>Référence</legend> | |
| <div class="row"> | |
| <div class="col"> | |
| <div class="form-group"> | |
| <label for="passport">Numéro de Passeport</label | |
| ><input | |
| class="form-control" | |
| id="passport" | |
| name="passport" | |
| type="text" | |
| required | |
| /> | |
| <div | |
| class="invalid-feedback" | |
| hidden | |
| style="display: block" | |
| ></div> | |
| </div> | |
| </div> | |
| <div class="col"></div> | |
| </div> | |
| </fieldset> | |
| <div class="form-actions"> | |
| <button class="btn btn-primary" type="submit"> | |
| Créer mon compte | |
| </button> | |
| </div> | |
| </form> | |
| </div> | |
| <script src="./script.js"></script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /** | |
| * 1. (HTML) Ajout des contraintes required dans le HTML | |
| * 2. Afficher les erreurs natives | |
| * 3. (HTML) Ajouter la contrainte MAX sur la date dans le HTML | |
| * 4. Déclencher la vérification au changement du champ | |
| * Masquer / Afficher les erreur au changement | |
| * 5. Ajout d'une Custom Constraint sur le passport | |
| * 6. Extraction de la règle de validation | |
| */ | |
| /** 2 */ | |
| const form = document.getElementById('booking'); | |
| form.addEventListener( | |
| 'invalid', | |
| event => { | |
| event.preventDefault(); | |
| const field = event.target; | |
| const feedbackContainer = field.parentNode.querySelector( | |
| '.invalid-feedback' | |
| ); | |
| feedbackContainer.innerText = field.validationMessage; | |
| feedbackContainer.hidden = false; | |
| }, | |
| { capture: true } | |
| ); | |
| /** 4 */ | |
| form.addEventListener('change', event => { | |
| const field = event.target; | |
| const feedbackContainer = field.parentNode.querySelector( | |
| '.invalid-feedback' | |
| ); | |
| if (field.checkValidity() /** fire invalid event if false */) { | |
| feedbackContainer.hidden = true; | |
| } | |
| }); | |
| ///////////////////////////// | |
| /** 5 */ | |
| form.elements.passport.addEventListener('change', event => { | |
| const field = event.target; | |
| const isValid = passportConstraint(field); // field.value.match(/^\d{2}[A-Z]{2}\d{5}$/) ? true : false; | |
| if (isValid === false) { | |
| field.setCustomValidity('PassportInvalid'); | |
| } else { | |
| field.setCustomValidity(''); | |
| } | |
| }); | |
| /** 6 */ | |
| function passportConstraint(field) { | |
| const value = field.value; | |
| const pattern = /^\d{2}[A-Z]{2}[0-9]{5}$/; | |
| if (value.match(pattern) === null) { | |
| return false; | |
| } | |
| return true; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment