JS: Form Validation - DIY (Do It Yourself)

form-diy.html

Notes

• Pass in ev (event) into the submit listener
• Get value, test if two or more characters in length.
  If true, then let form continue; else stop the form from submitting (ev.preventDefault())

window.addEventListener("DOMContentLoaded", function(){
  let form = document.querySelector('#myForm');
  form.addEventListener("submit", function(ev){
    console.log("Submit event happened!");
    console.log(ev);

    let nameInput = document.querySelector('#name');
    let nameInputValue = nameInput.value;

    if (nameInputValue.length >= 2) {
      // consider valid
      return true;
    } else {
      // consider invalid
      console.log("Please fill out name field");
      alert("Please fill out name field");
      // would want to have better feedback to user!
      ev.preventDefault();
    }
  })
})