Web-API

AzharAli-github · AzharAli-github · commit 528caf7488d8 · 2023-01-20T13:24:25.000+05:00
diff --git a/JavaScript/Advance/Web API/web-form API/images/js-logo.png b/JavaScript/Advance/Web API/web-form API/images/js-logo.png
diff --git a/JavaScript/Advance/Web API/web-form API/index.html b/JavaScript/Advance/Web API/web-form API/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Web-Form API</title>
+</head>
+
+<body>
+    <h1>Web Form Validation API</h1>
+    <!-- Example Three -->
+    <h2>checkValidity</h2>
+    <input id="inputOne" type="number" min="100" max="300" required>
+    <button onclick="DisplayOne()">Click</button>
+    <p id="textOne"></p>
+    <!-- Example Two -->
+    <h2>rangeOverflow()</h2>
+    <input id="inputTwo" type="number" max="100">
+    <button onclick="DisplayTwo()">Click</button>
+    <p id="textTwo"></p>
+    <!-- Example Three -->
+    <h2>rangeUnderflow()</h2>
+    <input type="number" min="100" id="inpThree">
+    <button onclick="DisplayThree()">Click</button>
+    <p id="textThree"></p>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/Web API/web-form API/script.js b/JavaScript/Advance/Web API/web-form API/script.js
@@ -0,0 +1,38 @@
+/*  Validation in JavaScript API 
+      There many types of Validation at first we will try
+         1.checkValidity()
+*/
+
+let textOne = document.getElementById('textOne');
+
+function DisplayOne() {
+    const InpObjOne = document.getElementById('inputOne');
+    if (!InpObjOne.checkValidity()) {
+        textOne.innerHTML = InpObjOne.validationMessage;
+    } else {
+        textOne.innerHTML = "Great it's OK!"
+    }
+}
+
+//  2. rangeOverflow Property
+
+let textTwo = document.getElementById('textTwo');
+
+function DisplayTwo() {
+    let inputTwo = document.getElementById('inputTwo');
+    if (inputTwo.validity.rangeOverflow) {
+        text = "Value is Too Large"
+    }
+}
+
+
+// 3. rangeUnderflow Property
+
+let textThree = document.getElementById('textThree');
+
+function DisplayThree() {
+    let inpThree = document.getElementById('inpThree');
+    if (inpThree.validity.rangeUnderflow) {
+        textThree.innerHTML = "Value is Too Small"
+    }
+}
