<!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> // 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(); } 
