ecki/JavaScript-from-Beginner-to-Professional
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

cleanup

Browse Source
This commit is contained in:
Karan 2021-11-25 20:01:41 +05:30 committed by GitHub
parent 23d9209825
commit 6c17b4d5af
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 0 additions and 95 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

95
Chapter 12/form validation
View File

@ -1,95 +0,0 @@
<!doctype html>
<html>
<head>
<style>
.hide {
display: none;
}
.error {
color: red;
font-size: 0.8em;
font-family: sans-serif;
font-style: italic;
}
input {
border-color: #ddd;
width: 400px;
display: block;
font-size: 1.5em;
}
</style>
</head>
<body>
<form name="myform"> Email :
<input type="text" name="email"> <span class="error hide"></span>
<br> Password :
<input type="password" name="password"> <span class="error hide"></span>
<br> User Name :
<input type="text" name="userName"> <span class="error hide"></span>
<br>
<input type="submit" value="Sign Up"> </form>
<script>
const myForm = document.querySelector("form");
const inputs = document.querySelectorAll("input");
const errors = document.querySelectorAll(".error");
const required = ["email", "userName"];
myForm.addEventListener("submit", validation);
function validation(e) {
let data = {};
e.preventDefault();
errors.forEach(function (item) {
item.classList.add("hide");
})
let error = false;
inputs.forEach(function (el) {
let tempName = el.getAttribute("name");
if (tempName != null) {
el.style.borderColor = "#ddd";
if (el.value.length == 0 && required.includes(tempName)) {
addError(el, "Required Field", tempName);
error = true;
}
if (tempName == "email") {
let exp = /([A-Za-z0-9._-]+@[A-Za-z0-9._-]+\.[A-Za-z0-9]+)\w+/;
let result = exp.test(el.value);
if (!result) {
addError(el, "Invalid Email", tempName);
error = true;
}
}
if (tempName == "password") {
let exp = /[A-Za-z0-9]+$/;
let result = exp.test(el.value);
if (!result) {
addError(el, "Only numbers and Letters", tempName);
error = true;
}
if (!(el.value.length > 3 && el.value.length < 9)) {
addError(el, "Needs to be between 3-8 characters", tempName);
error = true;
}
}
data[tempName] = el.value;
}
})
if (!error) {
myForm.submit();
}
}
function addError(el, mes, fieldName) {
let temp = el.nextElementSibling;
temp.classList.remove("hide");
temp.textContent = fieldName.toUpperCase() + " " + mes;
el.style.borderColor = "red";
el.focus();
}
</script>
</body>
</html>