Skip to content

Instantly share code, notes, and snippets.

@humphd

humphd/forms.html

Created November 23, 2023 20:08
Show Gist options
  • Save humphd/78605a40dec92bfd60016e31a72e5af2 to your computer and use it in GitHub Desktop.
Save humphd/78605a40dec92bfd60016e31a72e5af2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. humphd created this gist Nov 23, 2023.
    139 changes: 139 additions & 0 deletions forms.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,139 @@
    <!DOCTYPE html>
    <html>
    <head>
    <title>Form Validation</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Load Bootstrap's CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous"> <!-- Our stylesheet -->
    <!-- Bootstrap Icons -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
    <!-- Our custom styles-->
    <style>
    label[required]::after {
    content: " *";
    color: red;
    }
    </style>
    </head>
    <body class="m-4">
    <div class="container">
    <h1>Update User Info</h1>
    <p>
    Please update your user information.
    </p>

    <!-- Submit the form to /submit-form using a POST request -->
    <form id="user-info-form" action="/user-info" method="post">

    <div class="row">
    <label for="username" class="form-label">Username</label>
    <input type="text" class="form-control" id="username" name="username" value="jsmith" readonly />
    </div>

    <div class="row">
    <label for="name" class="form-label" required>Name</label>
    <input class="form-control" type="text" id="name" name="name" required value="Dave" />
    </div>

    <div class="row">
    <label for="email" class="form-label" required>Email</label>
    <input class="form-control" type="email" id="email" name="email" required value="email@email.com" />
    </div>

    <div class="row">
    <label for="phone" class="form-label" required>Phone</label>
    <input class="form-control" type="tel" id="phone" name="phone" required value="555-555-5555" />
    </div>

    <div class="row">
    <label for="password" class="form-label" required>Password</label>
    <input class="form-control" type="password" id="password" name="password" required value="abc" />
    </div>

    <div class="row">
    <label for="new-password" class="form-label" required>New Password</label>
    <input class="form-control" type="password" id="new-password" name="new-password" required />
    </div>

    <div class="row">
    <label for="confirm-password" class="form-label" required>Confirm Password</label>
    <input class="form-control" type="password" id="confirm-password" name="confirm-password" required />
    </div>

    <div class="mt-2 text-end">
    <input class="btn btn-outline-secondary mr-3" type="reset" name="reset" value="Reset">
    <input class="btn btn-primary" type="submit" name="submit" value="Submit">
    </div>
    </form>

    <div id="error-message" class="alert alert-danger mt-4 invisible" role="alert">
    A simple danger alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
    </div>
    </div>



    <!-- Include the Bootstrap JavaScript -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>

    <!-- Include our form validation script -->
    <script>
    function comparePasswords(first, second) {
    return first === second;
    }

    function showErrorMessage(message) {
    const errorMessage = document.querySelector('#error-message');
    errorMessage.innerText = message;
    errorMessage.classList.remove("invisible")
    }

    function hideErrorMessage() {
    document.querySelector('#error-message').classList.add("invisible")
    }

    const form = document.querySelector('#user-info-form');
    const newPasswordElem = form['new-password'];
    newPasswordElem.addEventListener("input", function(e) {
    const password = newPasswordElem.value;
    if(!(password.length >=8)) {
    console.log('WRONG LENGTH!!!!!')
    }

    if(!/\d/.test(password)) {
    showErrorMessage('Must contain a number')
    } else {
    hideErrorMessage();
    }

    });

    form.addEventListener('submit', function(event) {
    const confirmPasswordElem = form['confirm-password'];

    if(!comparePasswords(newPasswordElem.value, confirmPasswordElem.value)) {
    function checkPasswordMatch(e) {
    if(comparePasswords(newPasswordElem.value, confirmPasswordElem.value)) {
    hideErrorMessage();
    } else {
    showErrorMessage("Your new password is not matching, please fix");
    }
    }

    newPasswordElem.addEventListener("input", checkPasswordMatch);
    confirmPasswordElem.addEventListener("input", checkPasswordMatch);

    showErrorMessage("Your new password is not matching, please fix");
    event.preventDefault();
    return false;
    }

    return true;
    });



    </script>
    </body>
    </html>