Skip to content

Instantly share code, notes, and snippets.

@joshxduncan

joshxduncan/camila-validation.js

Last active February 18, 2022 19:15
Show Gist options
  • Save joshxduncan/a5f11cc2184c9cbd7edccd1dc6e55ce2 to your computer and use it in GitHub Desktop.
Save joshxduncan/a5f11cc2184c9cbd7edccd1dc6e55ce2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. joshxduncan revised this gist Feb 18, 2022. 1 changed file with 53 additions and 16 deletions.
    69 changes: 53 additions & 16 deletions camila-validation.js
    View file
    Original file line number Diff line number Diff line change
    @@ -2,39 +2,76 @@ const name = document.getElementById('userName');
    const email = document.getElementById('userEmail');
    const form = document.getElementById('form');

    const modal = document.getElementById('modal');
    const overlay = document.querySelector('#overlay');
    const modal = document.querySelector('.modal');
    const overlay = document.querySelector('.overlay');
    const openBtn = document.querySelector('.openBtn');
    const closeBtn = document.querySelector('.closeBtn');

    // We can hide the overlay/modal here, but that should be done in CSS
    // This is just an example
    overlay.style.display = "none";
    modal.style.display = "none";
    /**
    * Update name and email of modal
    * @param name
    * @param email
    */
    function updateModal(name, email) {
    const modalNameField = document.querySelector('.modal-user-name');
    const modalEmailField = document.querySelector('.modal-user-email');

    modalNameField.innerText = name;
    modalEmailField.innerText = email;
    }

    /**
    * This function validates a form
    * @param formElements the form object
    * @returns {boolean}
    */
    function validateForm(form) {
    const formFields = form.elements;
    const userName = formFields["userName"].value;
    const userEmail = formFields["userEmail"].value;
    let valid = true;
    let errors = "";

    // Validate the userName input field
    const userName = form.elements["userName"].value;
    if (userName === "Camila") {
    alert("This girl should have been deported back to Argentina in 2018!");
    return false;
    } else {
    alert("That name seems ok!")
    if (!userName.length > 2) {
    alert("Username is too short");
    valid = false;
    }

    // Validate the userEmail input field
    if (!(userEmail.length > 7) || !(userEmail.includes("@", "."))) {
    alert("Invalid email entered");
    valid = false;
    };

    // Validate modal
    // @todo: Add modal validation

    if (valid) {
    updateModal(userName, userEmail);
    }

    return valid;
    }

    // Validate our form when the user submits it
    form.addEventListener('submit', (e) => {
    // Stop default browser submit actions
    e.preventDefault();

    // Just for testing, it will show the submit action is working
    console.log('submitted');

    // Now we need to validate the form
    validateForm(form);
    formValid = validateForm(form);

    // We can show the modal if the form was validated
    if (formValid === true) {
    modal.classList.add("active");
    overlay.classList.add("active");
    }
    });

    // Close modal button functionality
    closeBtn.addEventListener('click', function(e) {
    e.preventDefault();
    modal.classList.remove("active");
    overlay.classList.remove("active");
    });
  2. joshxduncan created this gist Feb 18, 2022.
    40 changes: 40 additions & 0 deletions camila-validation.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,40 @@
    const name = document.getElementById('userName');
    const email = document.getElementById('userEmail');
    const form = document.getElementById('form');

    const modal = document.getElementById('modal');
    const overlay = document.querySelector('#overlay');
    const openBtn = document.querySelector('.openBtn');
    const closeBtn = document.querySelector('.closeBtn');

    // We can hide the overlay/modal here, but that should be done in CSS
    // This is just an example
    overlay.style.display = "none";
    modal.style.display = "none";

    /**
    * This function validates a form
    * @param formElements the form object
    * @returns {boolean}
    */
    function validateForm(form) {
    // Validate the userName input field
    const userName = form.elements["userName"].value;
    if (userName === "Camila") {
    alert("This girl should have been deported back to Argentina in 2018!");
    return false;
    } else {
    alert("That name seems ok!")
    }
    }

    // Validate our form when the user submits it
    form.addEventListener('submit', (e) => {
    e.preventDefault();

    // Just for testing, it will show the submit action is working
    console.log('submitted');

    // Now we need to validate the form
    validateForm(form);
    });