Form validation

form-validation.markdown

Form validation

A Pen by Bre'Ana Deen on CodePen.

License.

index.html

<form action="" onsubmit = "return verify()" method="POST">
  <input id="username" name="username" type="text">Enter your name</input>
<p id="validationMessage" hidden>Number must be between 40-90</p>
<p id="nanMessage" hidden>Please enter a numeric value</p>
<input id="number" name="number" type="text">Enter a number between 40-90</input>
<input type="submit"></input>
</form>

script.js

var numberInput = document.getElementById("number");
var validationMessage = document.getElementById("validationMessage");

function verify(){
  if(numberInput.value < 40 || numberInput.value > 90){
    validationMessage.style.display = "block";
    return false;
  }
  else if(isNaN(numberInput.value)){
    nanMessage.style.display = "block";
  }
  else{
    validationMessage.style.display = "none";
    return true;
  }
}

numberInput.onchange = function(){
  if(isNaN(numberInput.value)){
    nanMessage.style.display = "block";
  }
  else{
    nanMessage.style.display = "none";
  }
}

style.css

input{
  display: block;
}

p{
  color: red;
}