Wikiversity

JavaScript Programming/Forms and Security/Example Code

< JavaScript Programming | Forms and Security

example.html

edit 
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="Cache-Control" content="no-cache">
  <title>Example</title>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
    }

    form {
      display: grid;
      grid-template-columns: 11em 10em auto;
      grid-row-gap: 0.5em;
      grid-column-gap: 0.75em;
    }

    label {
      grid-column-start: 1;
      text-align: right;
    }

    input {
      grid-column-start: 2;
    }

    output {
      grid-column-start: 3;
      font-weight: bold;
    }

    input[type=button] {
      width: 8em;
    }
  </style>
  <script defer src="example.js"></script>
</head>

<body>
  <noscript>Enable JavaScript to see web page content.</noscript>

  <h1>Form Validation</h1>

  <form id="form" action="" method="">
    <label for="number">Number (1 - 100):</label>
    <input id="number" name="number" required type="number" min="1" max="100"></input>
    <output id="number-prompt"></output>

    <label for="text">Text (xxxx):</label>
    <input id="text" name="text" required type="text" minlength="4" maxlength="4"></input>
    <output id="text-prompt"></output>

    <label for="pattern">Pattern (###-##-####):</label>
    <input id="pattern" name="pattern" required type="text" minlength="11" maxlength="11"
      pattern="\d{3}-\d{2}-\d{4}"></input>
    <output id="pattern-prompt"></output>

    <input id="get" type="button" value="GET" disabled>
    <input id="post" type="button" value="POST" disabled>
  </form>
</body>

</html>

example.js

edit 
// This program demonstrates JavaScript form validation.
//
// References:
//   https://en.wikibooks.org/wiki/JavaScript

"use strict";

window.addEventListener("load", function () {
  let elements = document.getElementsByTagName("input");

  for (let i = 0; i < elements.length; i++) {
    elements[i].addEventListener("focus", inputFocus);
    elements[i].addEventListener("input", inputInput);
  }

  document.getElementById("get").addEventListener("click", getClick);
  document.getElementById("post").addEventListener("click", postClick);

  document.getElementById("number").focus();
});

function inputFocus() {
  document.activeElement.select();
  displayPrompt();
  checkButtons();
}

function displayPrompt(id = null) {
  const prompts = {
    number: "Enter a number between 1 and 100",
    text: "Enter your four-character code",
    pattern: "Enter your SSN as xxx-xx-xxxx"
  }

  let elements = document.getElementsByTagName("output");

  if (id == null) {
    id = document.activeElement.id;

    for (let i = 0; i < elements.length; i++) {
      elements[i].innerText = "";
    }
  }

  try {
    document.getElementById(id + "-prompt").innerText = prompts[id];
  }
  catch {
    // ignore when the active element is a button
  }
}

function inputInput() {
  let element = document.activeElement;
  let id = element.id;

  if (id == "pattern") {
    checkPattern();
  }

  if (!element.checkValidity()) {
    document.getElementById(id + "-prompt").innerText = element.validationMessage;
  }
  else {
    document.getElementById(id + "-prompt").innerText = "";
  }

  checkButtons();
}

function checkPattern() {
  let element = document.getElementById("pattern")
  let value = element.value;
  
  if (value.length > 3 && value.substr(3, 1) != "-") {
    value = value.substr(0, 3) + "-" + value.substr(3);
  }

  if (value.length > 6 && value.substr(6, 1) != "-") {
    value = value.substr(0, 6) + "-" + value.substr(6);
  }

  if (element.value != value) {
    element.value = value;
  }
}

function checkButtons() {
  let elements = document.getElementsByTagName("input");

  for (let i = 0; i < elements.length; i++) {
    if (!elements[i].checkValidity()) {
      document.getElementById("get").disabled = true;
      document.getElementById("post").disabled = true;
      return;
    }
  }

  document.getElementById("get").disabled = false;
  document.getElementById("post").disabled = false;
}

function getClick() {
  let form = document.getElementById("form")
  form.action = "http://postman-echo.com/get";
  form.method = "GET";
  form.submit();
}

function postClick() {
  let form = document.getElementById("form")
  form.action = "http://postman-echo.com/post";
  form.method = "POST";
  form.submit();
}
Retrieved from "https://en.wikiversity.org/w/index.php?title=JavaScript_Programming/Forms_and_Security/Example_Code&oldid=2141592"