CODEWITHSUNDEEP
javascripthtmlforms
Oliver Sewell
Oliver Sewell

Reputation: 137

Javascript Form Validation Event

)

I am trying to validate a form using Javascript, i would like the span to update when the string length is a certain amount of characters

    <form id="contact">
      <input id="name" name="name" type="text" class="feedback-input" placeholder="Name"/> <span id="spanName"> </span>
      <input name="email" type="text" class="feedback-input" placeholder="Email" />
      <textarea name="text" class="feedback-input" placeholder="Message..."></textarea>
      <input type="submit" value="SUBMIT"/>
    </form>





    window.onload = function () { 
      var name = document.getElementById("name");
      var nameVal = name.value;
      var spanName = document.getElementById("spanName");
      spanName.innerHTML = "&#10007;";

      name.addEventListener('keydown', function () {
        validate();
      });

      function validate() {
        console.log(name);
        console.log(nameVal);
         if (nameVal.length > 0) {
            spanName.innerHTML = "&#10004;";
         } else if (nameVal.length > 8) {
            spanName.innerHTML = "name is to long";
         } else {
            spanName.innerHTML = "yolo";
         }
        console.log(nameVal);
      }
    }

Upvotes: 0

Views: 1025

Answers (2)

Leonid Z
Leonid Z

Reputation: 161

Sorry, this is an answer:

var contact, spanName;
window.onload = function () {
    spanName = document.getElementById("spanName");
    contact = document.getElementById("name");
    contact.onkeyup = validate;
}
function validate() {
    var name = contact.value;
    var length = name.length;
    if (length > 0 && length <=8) {
        spanName.innerHTML = "&#10004;";
    } else if (length > 8) {
        spanName.innerHTML = "name is to long";
    } else {
        spanName.innerHTML = "yolo";
    }
}

Does it work to you?

Upvotes: 0

Quentin
Quentin

Reputation: 943651

Variable scope is important.

Inside window.onload you declare three variables … and only use name once, to assign a value to onkeyup.

Inside validate you use name, which is a global variable already provided by the browser (it is not the variable you declared that is local to the other function). This is a string, so its length never changes.

// Create an IIFE to create a new (non-global) scope for all your variables.
(function() {

  // Declare your variables at a level all the functions can reach them
  var spanName, name;

  // Get the DOM elements when the load event fires
  function getDomElements() {
    name = document.getElementById("contact").elements.name;
    spanName = document.getElementById("spanName");

    name.addEventListener("keyup", validate);
  }

  window.addEventListener("load", getDomElements);

  // Define your validation function
  // Check the VALUE of the form control, not the form control itself
  function validate() {
    // Make sure you exclude values you want a later condition to match
    if (name.value.length > 0 & name.value.length <= 8) {
      spanName.innerHTML = "&#10004;";
    } else if (name.value.length > 8) {
      spanName.innerHTML = "name is to long";
    } else {
      spanName.innerHTML = "yolo";
    }
  }
})();
<form id="contact">
  <input id="name" name="name" type="text" class="feedback-input" placeholder="Name" /> <span id="spanName"> </span>
  <input name="email" type="text" class="feedback-input" placeholder="Email" />
  <textarea name="text" class="feedback-input" placeholder="Message..."></textarea>
  <input type="submit" value="SUBMIT" />
</form>

Upvotes: 1

Related Questions