Form Validate
Thu Mar 02 2023 08:43:55 GMT+0000 (Coordinated Universal Time)
Saved by @root1024 #javascript #html #css
<!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>Document</title> <style> body { box-sizing: border-box; display: flex; flex-direction: column; justify-items: center; align-items: center; background-color: aqua; justify-content: center; /* text-align: center; */ height: 100vh; background: url(https://images.unsplash.com/photo-1469474968028-56623f02e42e?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1748&q=80); background-position: center; background-size: cover; } h1 { text-align: center; } #form { background-color: #c7ab9d; border: 2px solid rgb(4, 0, 255); border-radius: 10px; width: 400px; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } h2 { font-size: 30px; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 5px; } input { height: 30px; width: 250px; border-radius: 5px; padding: 10px; margin: 5px; /* padding: 10px; */ } input[type='submit'] { background-color: purple; text-align: center; align-content: center; color: white; height: 50px; font-size: 30px; width: 200px; padding-bottom: 20px; border: 0px; } .error { margin: 10px; color: blue; } </style> </head> <body> <h1>Form Validation</h1> <div id="form"> <h2>Login Form</h2> <form action="" onsubmit="return validateform()"> <input type="text" class="form" name="" id="username" placeholder="Enter Username"> <br> <span id="usererror" class="error"></span> <br> <input type="password" class="form" id="password" placeholder="Enter Password"> <br> <span class="error" id="passerror"></span> <br> <!-- <input type="submit" value="Pls Submit"> --> <button type="submit">Pls Submit</button> </form> </div> <script> let user = document.getElementById('username'); let pass = document.getElementById('password'); let condition1 = 0; let condition2 = 0; flag function validateform() { if (user.value == '') { document.getElementById('usererror').innerHTML = "User Name Blank"; condition1 = 0; } else if (user.value.length < 5) { document.getElementById('usererror').innerHTML = "Pls Enter more than 4 Charactre" condition1 = 0; } else { document.getElementById('usererror').innerHTML = "" document.getElementById('usererror').style.color = "Green"; condition1 = 1; } if (pass.value == '') { document.getElementById('passerror').innerHTML = "Password Cannot Blank"; condition2 = 0; } else if (pass.value.length < 5) { document.getElementById('passerror').innerHTML = "Pls Enter more than 4 Charactre"; condition2 = 0; } else { document.getElementById('passerror').innerHTML = ""; document.getElementById('passerror').style.color = "Green"; condition2 = 1; } if (condition1 == 1 & condition2 == 1) { return true; } else { return false; } } </script> </body> </html>
Comments