Validate the given form and display result after complete validation performed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form</title>
<style>
body {
font-family: sans-serif;
text-align: left;
}
label {
font-weight: bold;
line-height: 2.7;
}
.form-wrap {
margin: auto;
padding: 25px 30px;
border-radius: 5px;
background: #f7f7f7f7;
width: 25%;
color: #000000;
}
input[type="text"],
input[type="number"],
input[type="password"],
input[type="date"],
select {
width: 90%;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
font-size: 15px;
font-weight: bold;
border-color: #f0e8e800;
}
button {
border: none;
padding: 10px 15px;
font-weight: bold;
font-size: 14px;
color: #ffffff;
background: blueviolet;
border-radius: 4px;
margin-top: 20px;
}
#result {
background: #514e4e99;
padding: 10px;
display: none;
width: 340px;
border-radius: 5px;
color: #ffffff;
}
.gender,
.faculty,
.lang {
margin: 10px 0px;
}
#faculty {
width: 96%;
}
.d-block {
display: block !important;
}
.d-none {
display: none;
}
.error {
color: red;
display: none;
}
</style>
</head>
<body>
<div class="form-wrap">
<form name="register">
<div class="form-control">
<label for="username">User Name</label><br>
<input type="text" id="username">
<div class="error" id="usernameError">Username required*</div>
</div>
<div class="form-control">
<label for="password">Password</label><br>
<input type="password" placeholder="" id="password">
<div class="error" id="passwordError">Password required*</div>
<div class="d-none error" id="passwordLength">Password should have <br> minimum 5 max 10 character long.</div>
</div>
<div class="form-control">
<label for="phone">Phone</label>
<input type="text" id="phone">
<div class="error" id="phoneError">Phone Number required*</div>
<div class="d-none error" id="phoneLength">Phone number should be 10 digit Number.</div>
</div>
<div class="faculty">
<label for="faculty">Faculty</label>
<br>
<select name="faculty" id="faculty">
<option value="bim">BIM</option>
<option value="csit">CSIT</option>
<option value="bca">BCA</option>
</select>
</div>
<div class="gender">
<label for="gender">Gender</label><br>
<input type="radio" value="male" name="gender">Male
<input type="radio" value="female" name="gender">Female
<input type="radio" value="other" name="gender">Other
</div>
<div class="lang">
<label for="language">Language</label><br>
<input type="checkbox" name="lang" value="nepali"> Nepali
<input type="checkbox" name="lang" value="english"> English
<input type="checkbox" name="lang" value="hindi"> Hindi
</div>
<div class="form-control">
<label for="dateOfBirth">Date Of Birth</label><br>
<input type="text" id="date">
<div class="error" id="dateRequired">Date is required*</div>
<div class="d-none error" id="validDate">Date format should be dd/mm/yyyy format.</div>
</div>
<p id="result"></p>
<div class="btn-group">
<button>Submit</button>
</div>
</form>
</div>
<script>
const form = document.forms.register;
const result = document.getElementById("result");
const allError = document.querySelectorAll(".error");
const passwordLength = document.getElementById("passwordLength");
const phoneLength = document.getElementById("phoneLength");
const dateError = document.getElementById("dateRequired");
const dateFormat = document.getElementById("validDate");
form.addEventListener("submit", (e) => {
e.preventDefault();
//select elements for specific error
const nameError = document.getElementById("usernameError");
const passwordError = document.getElementById("passwordError");
const phoneError = document.getElementById("phoneError");
//select elements for value
const username = form.username.value.trim();
const password = form.password.value.trim();
const phone = form.phone.value.trim();
const gender = form.gender;
const lang = form.lang;
const faculty = form.faculty;
const date = form.date.value.trim();
//password min and max lenght regex
let regex = /^[a-z,0-9]{5,10}$/i;
//phone validation
let phoneNumber = /[0-9]{10}/
//date validation
let validDate = /^([0-2][0-9]|(3)[0-1])(\/)(((0)[0-9])|((1)[0-2]))(\/)\d{4}$/i
console.log(nameValidation(), dateValidation(), phoneValidation(), passwordValidation())
allFieldsAreEmpty() ? dipslayAllError() : renderValue();
function allFieldsAreEmpty() {
if (!username && !password && !phone && !date)
return true;
else
return false;
}
phoneValidation();
nameValidation();
passwordValidation();
dateValidation();
function dipslayAllError() {
allError.forEach(item => {
item.classList.add("d-block");
});
}
function renderValue() {
result.classList.add("d-block");
result.innerHTML =
`Username :${username}<br>
Password :${password} <br>
Faculty : ${faculty.options[faculty.selectedIndex].value}<br>
Gender : ${getCheckedGenderValue()}<br>
Language: ${getSelectedLanguage()}<br>
DateOfBirth: ${date}
`;
}
function getCheckedGenderValue() {
let selectedGender = "";
gender.forEach(element => {
if (element.checked)
selectedGender += element.value
});
return selectedGender;
}
function getSelectedLanguage() {
let selectedLang = "";
lang.forEach(item => {
if (item.checked)
selectedLang += item.value + ","
})
return selectedLang;
}
function nameValidation() {
!username ? nameError.classList.add('d-block') : nameError.classList.remove('d-block');
}
function passwordValidation() {
!password ? passwordError.classList.add("d-block") : passwordError.classList.remove("d-block");
if (!regex.test(password))
passwordLength.classList.add("d-block");
else
passwordLength.classList.remove("d-block");
}
function phoneValidation() {
!phone ? phoneError.classList.add("d-block") : phoneError.classList.remove("d-block")
if (!phoneNumber.test(phone))
phoneLength.classList.add("d-block");
else
phoneLength.classList.remove("d-block");
}
function dateValidation() {
!date ? dateError.classList.add("d-block") : dateError.classList.remove("d-block")
if (!validDate.test(date))
dateFormat.classList.add("d-block");
else
dateFormat.classList.remove("d-block");
}
})
</script>
</body>
</html>
Output
![[Cupons] Paid udemy courses for free](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYa-f_8UEE95d9stpdRzq6_DUq19avn09M2CVWIuQGI_PwaZBMcNhuHmPZQsw81GMeWwUY2Q-Cr66RoAmMq1f_pok6pdv-W86qc9_wWSxqXEq_RHYyRY0Ldly_yi2DSfyed4Cxiks6Nbzp/w680/Paid+udemy+courses+for+free.png)
0 Comments
If you have any question please ask?