Javascript DOM HTML Input Text form validation

Introduction

Form validation:

View in separate window 

<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
<form action="/action_page.php" onsubmit="return myFunction()">
  Name (max 10 characters): <input type="text" id="fname" size="20" name="fname"><br>
  Age (from 1 to 100): <input type="text" id="age" size="20" name="age"><br>
  E-mail: <input type="text" id="email" size="20" name="mail"><br><br>
  <input type="submit" value="Submit">
</form>//w  w  w  .ja  v  a  2 s. c o  m

<script>
function myFunction() {
  var at = document.getElementById("email").value.indexOf("@");
  var age = document.getElementById("age").value;
  var fname = document.getElementById("fname").value;
  submitOK = "true";

  if (fname.length > 10) {
    document.getElementById("demo").innerHTML = "The name may have no more than 10 characters";
    submitOK = "false";
  }

  if (isNaN(age) || age < 1 || age > 100) {
    document.getElementById("demo").innerHTML = "The age must be a number between 1 and 100";
    submitOK = "false";
  }

  if (at == -1) {
    document.getElementById("demo").innerHTML = "Not a valid e-mail!";
    submitOK = "false";
  }

  if (submitOK == "false") {
    return false;
  }
}
</script>

</body>
</html>



PreviousNext

Related