Search code examples
javascriptvalidationlistenerhandler

Javascript Form Validation - event.target.validity.valid

New to javascript and just trying to make a simple form validation where if the user/pass is valid the box border turns green, and if invalid, it turns red (pictured) Valid/Invalid

Here is my HTML: (Form Works, I'm guessing I'm screwing up on the listeners and Handlers)

<!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  <input type="text" name="username" value="Username" minLength="6" maxlength="10" required>
  <br><br>
  <input type="text" name="password" value="Password" minLength="8" maxlength="15" required>
  <br><br>
  <input type="submit" value="Submit" onclick="function(changeStyle)">
</form> 

<script src="Script1.js">
</script>

</body>
</html>

Javascript: 

function valid() {
  var textElements = document.getElementsByTagName('input');
    textElements[i].addEventListener('input', function(changeStyle) {
    if (event.target.validity.valid) {
        textElements[i].style.border = "solid green 2px";
        textElements[i].style.boxShadow = "0 0 5px green";
    } else {
        textElements[i].style.border = "solid red 2px";
        textElements[i].style.boxShadow = "0 0 5px red";
    }
}, false);

}


</script>
Solution
    1. You are listening for an event that doesn't exist. There is no such event as "input" generated by the browser. You should be listening for "keyup".
    2. You are acting as if you are iterating (by referencing textElements[i].) but you do not have an iteration loop in your code.

    So what I've done is:

    • wrap it all in a listener to ensure that the DOM is ready
    • convert the result from your selector into an Array so that we have access to a convenient iterator method .forEach by using the Spread operator
    • iterated over that array and added a 'keyup' listener to each item in the array. This means that everytime a key is hit and released, the listener will trigger

    E.g.

    <!DOCTYPE html>
<html>
<body>

<form action="/action_page.php">
  <input type="text" name="username" value="Username" minLength="6" maxlength="10" required>
  <br><br>
  <input type="text" name="password" value="Password" minLength="8" maxlength="15" required>
  <br><br>
  <input type="submit" value="Submit" onclick="function()">
</form> 

<script>

document.addEventListener("DOMContentLoaded", function() {
  var textElements = [...document.getElementsByTagName('input')];
  var listen = function(item, index) {
    item.addEventListener('keyup', function(ev){
      if (event.target.validity.valid) {
          item.style.border = "solid green 2px";
          item.style.boxShadow = "0 0 5px green";
      } else {
          item.style.border = "solid red 2px";
          item.style.boxShadow = "0 0 5px red";
      }
    })
  }
  textElements.forEach(listen);
});



</script>

</body>
</html>