Created
February 13, 2025 17:02
-
-
Save kissu/10f9ea5d2923e4da0ddeb5d85e9616ee to your computer and use it in GitHub Desktop.
Form validation (a bit hardcore but it's okay ❤️🩹)
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> | |
| <title>Form Validation</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="shortcut icon" href="data:image/x-icon;" type="image/x-icon"> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" | |
| integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="row justify-content-center"> | |
| <div class="col-12 col-sm-6"> | |
| <h1 class="my-4">Shipping address</h1> | |
| <form role="form"> | |
| <div class="mb-3"> | |
| <label class="form-label" for="first_name">First name</label> | |
| <input type="text" class="form-control" name="first_name" id="first_name" placeholder="John"> | |
| </div> | |
| <div class="mb-3"> | |
| <label class="form-label" for="last_name">Last name</label> | |
| <input type="text" class="form-control" name="last_name" id="last_name" placeholder="Doe"> | |
| </div> | |
| <div class="mb-3"> | |
| <label class="form-label" for="address">Address</label> | |
| <textarea class="form-control" name="address" id="address" rows="2" | |
| placeholder="16 Villa Gaudelet"></textarea> | |
| </div> | |
| <div class="mb-3"> | |
| <label class="form-label" for="country">Country</label> | |
| <input type="text" class="form-control" name="country" id="country" placeholder="France"> | |
| </div> | |
| <div class="mb-3"> | |
| <label class="form-label" for="zip_code">Zip code</label> | |
| <input type="text" class="form-control" name="zip_code" id="zip_code" placeholder="75001"> | |
| </div> | |
| <div class="mb-3"> | |
| <label class="form-label" for="city">City</label> | |
| <input type="text" class="form-control" name="city" id="city" placeholder="Paris"> | |
| </div> | |
| <div class="mb-3"> | |
| <label class="form-label" for="email">Email address</label> | |
| <input type="email" class="form-control" name="email" id="email" placeholder="[email protected]"> | |
| </div> | |
| <div class="mb-3"> | |
| <label class="form-label" for="mobile_phone">Mobile Phone</label> | |
| <input type="text" class="form-control" name="mobile_phone" id="mobile_phone" placeholder="0601020304"> | |
| </div> | |
| <div class="checkbox mb-3"> | |
| <label> | |
| <input type="checkbox" name="tos" id="tos"> | |
| I agree with the <a href="#">terms of service</a>. | |
| </label> | |
| </div> | |
| <button type="submit" class="btn btn-primary" disabled> | |
| Please fill all fields | |
| </button> | |
| <div class="yolo">this is a div yolo</div> | |
| </form> | |
| </div> | |
| </div> | |
| </div> | |
| <footer style="height: 7em"></footer> | |
| <!-- Including your code --> | |
| <script type="module" src="./lib/validation.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 select all the elements (email, tosCheckbox, textInput...) | |
| const allInputs = [...document.querySelectorAll('.form-control')] | |
| // console.log(allInputs) | |
| const emailInput = document.querySelector('#email') | |
| const tosCheckbox = document.querySelector('#tos') | |
| const submitButton = document.querySelector('.btn') | |
| // #2 listen to a JS event | |
| allInputs.forEach((input) => { | |
| input.addEventListener('blur', () => { | |
| validInput(input) | |
| enableButton() | |
| }) | |
| }) | |
| // #3 react to a change on the checkbox | |
| tosCheckbox.addEventListener('change', () => { | |
| enableButton() | |
| }) | |
| // #4 function enableButton back (remove disabled) | |
| const enableButton = () => { | |
| const allInputsFilled = allFilled(allInputs) | |
| const tosIsValid = checkboxChecked(tosCheckbox) | |
| if (allInputsFilled && tosIsValid) { | |
| submitButton.disabled = false | |
| } else { | |
| submitButton.disabled = true | |
| } | |
| } | |
| const checkboxChecked = (input) => { | |
| return input.checked | |
| } | |
| // #5 all the inputs are filled properly | |
| const allFilled = (inputs) => { | |
| return inputs.every((input) => { | |
| return input.classList.contains('.is-valid') | |
| }) | |
| } | |
| // #6 check if validInput (regular fields + email) | |
| const validInput = (input) => { | |
| if (input === emailInput) { | |
| emailValidation(input) | |
| } else { | |
| addValidationClasses(input, input.value !== "") | |
| } | |
| } | |
| const emailValidation = (input) => { | |
| const isValid = /^\w+@\w+(\.\w{2,6})+$/.test(input.value) | |
| addValidationClasses(input, isValid) | |
| } | |
| const addValidationClasses = (input, isValid) => { | |
| if (isValid) { | |
| input.classList.remove('is-invalid') | |
| input.classList.add('is-valid') | |
| } else { | |
| input.classList.remove('is-valid') | |
| input.classList.add('is-invalid') | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment