Form Validation Using JavaScript is the best way to attract users. Web forms are used to collect user’s data such as username, email address, phone, age, and so on. But sometimes users do not enter the required details as we need to provide a good users experience. So it is important to validate the form data before sending it to the server-side. For form validation, client-side JavaScript can help us to get this thing on our websites.
So Let’s div and create some basic code that will validate our form. In the following example, we are going to validate the name, password, e-mail, telephone, subject, and address:
Complete Code
<!DOCTYPE html>
<html>
<head>
<title>Title of the document Softcodeon</title>
</head>
<body>
<h2 style="text-align: left"> Registration Form SoftCodeon </h2>
<form name="RegistrationForm" action="/form/action.php" onsubmit="return ValidationForm()" method="post" class="softcodeon">
<div>
<label for="username">Username:</label>
<input type="text" id="Name" size="50" name="Name">
</div>
<br>
<div>
<label for="E-mail">E-mail Address:</label>
<input type="text" id="E-mail" size="50" name="Email">
</div>
<br>
<div>
<label for="Password">Password:</label>
<input type="text" id="Password" size="50" name="Password">
</div>
<br>
<div>
<label for="Telephone">Telephone: </label>
<input type="text" id="Telephone" size="50" name="Telephone">
</div>
<br>
<div>
<label>Select Book</label>
<select type="text" value="" name="Subject">
<option></option>
<option>C sharp</option>
<option>Java</option>
<option>Python</option>
<option>C++</option>
</select>
</div>
<br>
<div class="btns">
<input class="btn1" type="submit" value="Send" name="Submit">
<input class="btn1" type="reset" value="Reset" name="Reset">
</div>
</form>
</body>
</html>CSS Code
<style>
.softcodeon {
margin-left: 70px; font-weight: bold;
text-align: left; font-family: sans-serif, bold, Arial, Helvetica;
font-size: 14px; }
.btns { display: flex; align-items: center; width: 100%;}
div input {margin-right: 10px;}
form {margin: 0 auto; width: 500px;
}
form input {padding: 10px;}
.btn1{background:#00dff0;color: #000;border-radius: 10px;}
form select {background-color: #ffffff; padding: 5px;}
form label {display: block; width: 100%;margin-bottom: 5px;}
</style>Form Validation Using JavaScript
<script>
function ValidationForm() {
let username = document.forms["RegistrationForm"]["Name"];
let email = document.forms["RegistrationForm"]["Email"];
let phoneNumber = document.forms["RegistrationForm"]["Telephone"];
let select = document.forms["RegistrationForm"]["Subject"];
let pass = document.forms["RegistrationForm"]["Password"];
if(username.value == "") {
alert("Please enter your name.");
username.focus();
return false;
}
if(email.value == "") {
alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if(email.value.indexOf("@", 0) < 0) {
alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if(email.value.indexOf(".", 0) < 0) {
alert("Please enter a valid e-mail address.");
email.focus();
return false;
}
if(phoneNumber.value == "") {
alert("Please enter your telephone number.");
phoneNumber.focus();
return false;
}
if(pass.value == "") {
alert("Please enter your password");
pass.focus();
return false;
}
if(select.selectedIndex < 1) {
alert("Please enter your course.");
select.focus();
return false;
}
return true;
}
</script>Form validation verifies the accuracy of the user’s data before proceeding with the form. JavaScript provides more active client-side form validation than server-side validation does. Server-side validation needs more time first happening on the server, which needs the user’s input to be submitted and sent to the server before validation happens. Thus, client-side validation helps to produce a better user experience. Many web developers favor JavaScript form validation.