JavaScript Programming/Forms and Security/Example Code
Appearance
example.html
[edit | edit source]<!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 | edit source]// 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();
}