Created
September 3, 2022 01:00
-
-
Save paschalyn1/508279af190242a32b89fc1d05f1d19b to your computer and use it in GitHub Desktop.
Form Registration
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <! Doctype html> | |
| <html> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initla-scale=1.0"> | |
| <title>FORM</title> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <form> | |
| <div class="input-group"> | |
| <label for="full_name">Full Name</label> | |
| <input type= text id="full_name" name="full_name" placeholder="Enter your name" required onkeyup="validateName()"> | |
| <span id = "check_name" class="span"></span> | |
| </div> | |
| <br> | |
| <div class="input-group"> | |
| <label for="phone_name">Telephone</label> | |
| <input type= tel id="phone_num" name="phone_num" placeholder="123 456 7890" required onkeyup="validateTel()"> | |
| <span id = "check_phone" class="span"></span> | |
| </div> | |
| <br> | |
| <div class="input-group"> | |
| <label for="Email">Email</label> | |
| <input type="email" id="email" name="email" placeholder="Enter your email herre..." required onkeyup="validateEmail()"> | |
| <span class="span" id = "check_email"></span> | |
| </div> | |
| <br> | |
| <div class="input-group"> | |
| <label for="message">Message</label> | |
| <textarea rows="0" id="message" cols="10" placeholder="Say your mind..." onkeyup="validateText()"></textarea> | |
| <span class="span" id = "check_text"></span> | |
| </div> | |
| <br> | |
| <button onclick="return validateForm()" type="button" id="button">Submit</button> | |
| <span class="span" id = "check_submit"></span> | |
| </form> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let name_error = document.getElementById("check_name"); | |
| let phone_error = document.getElementById("check_phone"); | |
| let email_error = document.getElementById("check_email"); | |
| let text_error = document.getElementById("check_text"); | |
| let submit_error = document.getElementById("check_submit"); | |
| function validateName(){ | |
| let name = document.getElementById('full_name').value; | |
| if(name.length == 0){ | |
| name_error.innerHTML = "Name is required"; | |
| name_error.style.color="red"; | |
| return false; | |
| } | |
| if(!name.match(/^[A-Za-z]*\s{1}[A-Za-z]*$/)){ | |
| name_error.innerHTML = "Name seems incomplete"; name_error.style.color="red"; | |
| return false; | |
| } | |
| name_error.style.color="green"; | |
| name_error.innerHTML = "Name is valid"; | |
| return true; | |
| } | |
| //telephone validation | |
| function validateTel(){ | |
| let phone = document.getElementById('phone_num').value; | |
| if(phone.length == 0){ | |
| phone_error.innerHTML = "Phone number is required"; | |
| phone_error.style.color="red"; | |
| return false; | |
| } | |
| if(phone.length < 10){ | |
| phone_error.innerHTML = "Phone number seems incomplete!"; | |
| phone_error.style.color="red"; | |
| return false; | |
| } | |
| if(!phone.match(/^[0-9]{10}$/)){ | |
| phone_error.innerHTML = "Phone number is not valid!"; | |
| phone_error.style.color="red"; | |
| return false; | |
| } | |
| if(phone.length >= 10){ | |
| phone_error.style.color="green"; | |
| phone_error.innerHTML = "Telephone is valid"; | |
| return true; | |
| } | |
| } | |
| function validateEmail(){ | |
| let email = document.getElementById('email').value; | |
| if(email.length == 0){ | |
| email_error.innerHTML = 'Email is required'; | |
| email_error.style.color= 'red' | |
| return false; | |
| } | |
| if(!email.match(/^[A-Za-z\._\-[0-9]&[@][A-Za-z]*[\.][a-z]{2,4}$/)){ | |
| email_error.innerHTML = 'Email is not valid'; | |
| email_error.style.color="red"; | |
| return false; | |
| } | |
| email_error.innerHTML = "Email input is valid"; | |
| email_error.style.color="green"; | |
| return true; | |
| } | |
| function validateText(){ | |
| let message = document.getElementById('message').value; | |
| let length = 300; | |
| if(message.length == 0){ | |
| text_error.innerHTML = "Text is required"; | |
| text_error.style.color="red"; | |
| return false; | |
| } | |
| text_error.innerHTML = "Text is OK. Characters:" + message.length; | |
| text_error.style.color="green"; | |
| return true; | |
| } | |
| function validateForm(){ | |
| if(!validateName() || !validateTel() || !validateEmail() || !validateText()){ | |
| submit_error.style.fontSize = '10px'; | |
| submit_error.innerHTML = 'Check Form again. Seems there are invalid inputs'; | |
| setTimeout(function(){submit_error.style.display = 'none'; | |
| submit_error.style.transition = 'all 0.2s ease-in'}, 3000); | |
| return false; | |
| } | |
| return true; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| *{ | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| .container{ | |
| width: 100%; | |
| height: 100vh; | |
| background: #e1e842; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .container form{ | |
| width: calc(100% - 20%); | |
| max-width: 100%; | |
| padding: 20px; | |
| background: #f3f3f3; | |
| height: fit-content; | |
| border-radius: 10px; | |
| position: relative; | |
| box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); | |
| } | |
| .input-group{ | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| margin: 3px; | |
| position: relative; | |
| } | |
| .input-group label{ | |
| flex-basis: 28%; | |
| } | |
| .input-group input, .input-group textarea{ | |
| flex-basis: 68%; | |
| background: transparent; | |
| border: 0; | |
| outline: 0; | |
| margin-left: 10px; | |
| padding: 10px 0px; | |
| border-bottom: 1px solid gray; | |
| font-size: 12px; | |
| color: black; | |
| } | |
| ::placeholder{ | |
| font-size: 10px; | |
| font-family: verdana; | |
| } | |
| .span{ | |
| text-align: right; | |
| font-size: 8px; | |
| font-family: verdana; | |
| postion: absolute; | |
| transition: all 0.2s ease-in; | |
| font-weight: lighter; | |
| color: red; | |
| } | |
| form #button{ | |
| padding: 10px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| color: white; | |
| border: none; | |
| background: red; | |
| border-radius: 5px; | |
| outline: none; | |
| width: 60%; | |
| margin: 10px calc(100% - 80%) 10px; | |
| display: block; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
An HTML/JS Form with full form validation