Merge pull request #20 from AkashKobal/main

form validation
AkashKobal · Mar 14, 2024 · 7cbedaf · 7cbedaf
2 parents 020f57b + eab861a
commit 7cbedaf
Show file tree

Hide file tree

Showing 8 changed files with 253 additions and 163 deletions.
diff --git a/15. Form Validation/README.md b/15. Form Validation/README.md
@@ -0,0 +1,131 @@
+# Form validation _(HTML, CSS, Js)_
+![alt text](https://github.com/AkashKobal/web-development/blob/main/15.%20Form%20Validation/output.png)
+
+## _HTML_
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Form validation</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js"></script>
+</head>
+
+<body>
+    <form class="colorful-form">
+        <div class="form-group">
+            <label class="form-label" for="name">Name:</label>
+            <input required placeholder="Enter your name" class="form-input" type="text">
+        </div>
+        <div class="form-group">
+            <label class="form-label" for="email">Email:</label>
+            <input required placeholder="Enter your email" class="form-input" name="email" id="email" type="email">
+        </div>
+        <div class="form-group">
+            <label class="form-label" for="email">Phone no:</label>
+            <input required placeholder="Enter your phone no" class="form-input" name="email" id="phoneNo" type="number">
+        </div>
+        <div class="form-group">
+            <label class="form-label" for="message">Message:</label>
+            <textarea required placeholder="Enter your message upto 250 characters." class="form-input" name="message"
+                id="message"></textarea>
+        </div>
+        <button class="form-button" type="submit" onclick="phoneNumber()">Submit</button>
+    </form>
+</body>
+</html>
+```
+
+## _Javascript_
+```js
+let name = document.getElementById("name");
+let email = document.getElementById("email");
+let phoneNo = document.getElementById("phoneNo");
+let message = document.getElementById("message");
+
+function phoneNumber() {
+    let phoneNoLength = phoneNo.value;
+    if (phoneNoLength.length > 10 || phoneNoLength.length < 10) {
+        alert("Invalid phone number");
+    }
+    else if (phoneNo.type !== "number") {
+        alert("Invalid phone number");
+    }
+    else {
+        textArea();
+    }
+}
+
+function textArea() {
+    let messageLength = message.value;
+    if (messageLength.length > 250) {
+        alert("Message should be less than 250 characters");
+    }
+}
+```
+## _CSS_
+```css
+.colorful-form {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f5f5f5;
+    border-radius: 10px;
+
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 5px;
+    color: #333;
+}
+
+.form-input {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    background-color: #fff;
+    color: #333;
+    border-radius: 5px;
+}
+
+textarea.form-input {
+    height: 100px;
+}
+
+.form-button {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background-color: #ff6f69;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.form-button:hover {
+    background-color: #ff5f59;
+}
+
+.colorful-form {
+    max-width: 420px;
+    margin: 0 auto;
+    padding: 25px;
+    background-color: #f5f5f5;
+    border-radius: 10px;
+    left: 50%;
+    margin-top: 250px;
+    padding-right: 40px;
+}
+```
+
diff --git a/15. Form Validation/index.html b/15. Form Validation/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Form validation</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="script.js"></script>
+</head>
+
+<body>
+    <form class="colorful-form">
+        <div class="form-group">
+            <label class="form-label" for="name">Name:</label>
+            <input required placeholder="Enter your name" class="form-input" type="text">
+        </div>
+        <div class="form-group">
+            <label class="form-label" for="email">Email:</label>
+            <input required placeholder="Enter your email" class="form-input" name="email" id="email" type="email">
+        </div>
+        <div class="form-group">
+            <label class="form-label" for="email">Phone no:</label>
+            <input required placeholder="Enter your phone no" class="form-input" name="email" id="phoneNo" type="number">
+        </div>
+        <div class="form-group">
+            <label class="form-label" for="message">Message:</label>
+            <textarea required placeholder="Enter your message upto 250 characters." class="form-input" name="message"
+                id="message"></textarea>
+        </div>
+        <button class="form-button" type="submit" onclick="phoneNumber()">Submit</button>
+    </form>
+</body>
+</html>
diff --git a/15. Form Validation/output.png b/15. Form Validation/output.png
diff --git a/15. Form Validation/script.js b/15. Form Validation/script.js
@@ -0,0 +1,24 @@
+let name = document.getElementById("name");
+let email = document.getElementById("email");
+let phoneNo = document.getElementById("phoneNo");
+let message = document.getElementById("message");
+
+function phoneNumber() {
+    let phoneNoLength = phoneNo.value;
+    if (phoneNoLength.length > 10 || phoneNoLength.length < 10) {
+        alert("Invalid phone number");
+    }
+    else if (phoneNo.type !== "number") {
+        alert("Invalid phone number");
+    }
+    else {
+        textArea();
+    }
+}
+
+function textArea() {
+    let messageLength = message.value;
+    if (messageLength.length > 250) {
+        alert("Message should be less than 250 characters");
+    }
+}
diff --git a/15. Form Validation/style.css b/15. Form Validation/style.css
@@ -0,0 +1,59 @@
+.colorful-form {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f5f5f5;
+    border-radius: 10px;
+
+}
+
+.form-group {
+    margin-bottom: 20px;
+}
+
+.form-label {
+    display: block;
+    font-weight: bold;
+    margin-bottom: 5px;
+    color: #333;
+}
+
+.form-input {
+    width: 100%;
+    padding: 10px;
+    border: none;
+    background-color: #fff;
+    color: #333;
+    border-radius: 5px;
+}
+
+textarea.form-input {
+    height: 100px;
+}
+
+.form-button {
+    display: block;
+    width: 100%;
+    padding: 10px;
+    background-color: #ff6f69;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.form-button:hover {
+    background-color: #ff5f59;
+}
+
+.colorful-form {
+    max-width: 420px;
+    margin: 0 auto;
+    padding: 25px;
+    background-color: #f5f5f5;
+    border-radius: 10px;
+    left: 50%;
+    margin-top: 250px;
+    padding-right: 40px;
+}
diff --git a/README.md b/README.md
@@ -48,4 +48,7 @@
 ## Age calculator _(HTML, CSS, Js)_
 ![alt text](https://github.com/AkashKobal/web-development/blob/main/14.%20Age%20Calculator/output.png)
 
+## Form validation _(HTML, CSS, Js)_
+![alt text](https://github.com/AkashKobal/web-development/blob/main/15.%20Form%20Validation/output.png)
+
 
diff --git a/index.html b/index.html
@@ -128,6 +128,7 @@
         transition-duration: 400ms;
         transition-property: color;
         padding-top: 12px;
+
       }
 
       button:focus,
@@ -162,6 +163,7 @@
         margin-left: -11px;
         /* margin-right: 10px; */
         /* background-color: #21212426; */
+
       }
 </style>
 </html>