AzharAli-github · AzharAli-github · Jan 28, 2023 · Jan 28, 2023
diff --git a/JavaScript/Advance/DOM/5. DOM Form/css/style.css b/JavaScript/Advance/DOM/5. DOM Form/css/style.css
@@ -0,0 +1,3 @@
+h2 {
+    font-family: monospace;
+}
diff --git a/JavaScript/Advance/DOM/5. DOM Form/images/js-logo.png b/JavaScript/Advance/DOM/5. DOM Form/images/js-logo.png
diff --git a/JavaScript/Advance/DOM/5. DOM Form/index.html b/JavaScript/Advance/DOM/5. DOM Form/index.html
@@ -0,0 +1,30 @@
+<!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>DOM FORM</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+
+<body>
+    <h1>Javascript Form Validation</h1>
+    <h2>Example One</h2>
+    <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
+        Name: <input type="text" name="fname">
+        <input type="submit" value="Submit">
+    </form>
+    <h2>Example Two</h2>
+    <p>Please input a number between 1 and 10:</p>
+
+    <input id="numb">
+
+    <button type="button" onclick="FunctionOne()">Submit</button>
+
+    <p id="textOne"></p>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/DOM/5. DOM Form/script.js b/JavaScript/Advance/DOM/5. DOM Form/script.js
@@ -0,0 +1,25 @@
+// Example One
+function validateForm() {
+    let x = document.forms["myForm"]["fname"].value;
+    if (x == "") {
+        alert("Name must be filled out");
+        return false;
+    }
+}
+
+
+//Example Two
+let textOne = document.getElementById('textOne');
+
+function FunctionOne() {
+    // Get the value of the input field with id="numb"
+    let x = document.getElementById("numb").value;
+    // If x is Not a Number or less than one or greater than 10
+    let text;
+    if (isNaN(x) || x < 1 || x > 10) {
+        text = "Input not valid";
+    } else {
+        text = "Input OK";
+    }
+    textOne.innerHTML = text;
+}