In this article, We will go into the subject of Form validation with JavaScript, taking you through the creation of powerful and user-friendly forms. Form validation is an essential aspect of web development that ensures the accuracy and integrity of user-submitted data. Whether you’re creating a simple contact form or a complex registration page, implementing proper form validation enhances user experience and prevents erroneous data from entering your system.
Q1: Why is Form Validation Important?
Form validation is essential to prevent users from submitting incomplete or incorrect information. It improves data accuracy, decreases user annoyance, and helps your website’s overall reputation.
Q2: What are the Types of Form Validation?
There are two main types of form validation: client-side and server-side. Client-side validation occurs within the user’s browser, providing instant feedback. Server-side validation occurs on the server after form submission, offering an additional layer of security.
Q3: How Can HTML Help in Validation?
HTML provides input types (such as email, number, and date) that can enforce certain data formats. Additionally, attributes like required and pattern can be used to mandate specific input criteria.
Q4: What Role Does CSS Play in Form Validation?
CSS can be used to style and visually guide users through the validation process. It can highlight invalid fields or provide visual cues on valid inputs.
Q5: How Does JavaScript Contribute to Form Validation?
JavaScript empowers dynamic form validation. It allows you to run real-time tests, display custom error messages, and change the form based on user input.
Source Code for Form validation with JavaScript:
<!DOCTYPE html>
<html>
<head>
<title>Form validation using html css javascript</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
body{
background: url('https://images.pexels.com/photos/1181325/pexels-photo-1181325.jpeg?auto=compress&cs=tinysrgb&w=600');
background-size: cover;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1 class="text-center fw-bold p-2 text-white"> Form validation using html css javascript </h1>
<div class="container mt-5">
<div class="row d-flex justify-content-center">
<div class="col-lg-6 p-2">
<form action="#" onsubmit="return validation()" class="bg-light p-4">
<div class="form-group">
<label for="user" class="font-weight-bold"> Username: </label>
<input type="text" name="user" class="form-control" id="user" autocomplete="off">
<span id="username" class="text-danger font-weight-bold"> </span>
</div>
<div class="form-group">
<label class="font-weight-bold"> Password: </label>
<input type="text" name="pass" class="form-control" id="pass" autocomplete="off">
<span id="passwords" class="text-danger font-weight-bold"> </span>
</div>
<div class="form-group">
<label class="font-weight-bold"> Confirm Password: </label>
<input type="text" name="conpass" class="form-control" id="conpass" autocomplete="off">
<span id="confrmpass" class="text-danger font-weight-bold"> </span>
</div>
<div class="form-group">
<label class="font-weight-bold"> Mobile Number: </label>
<input type="text" name="mobile" class="form-control" id="mobileNumber" autocomplete="off">
<span id="mobileno" class="text-danger font-weight-bold"> </span>
</div>
<div class="form-group">
<label class="font-weight-bold"> Email: </label>
<input type="text" name="email" class="form-control" id="emails" autocomplete="off">
<span id="emailids" class="text-danger font-weight-bold"> </span>
</div>
<div class="d-flex justify-content-center">
<input type="submit" name="submit" value="submit" class="btn btn-success w-75 mt-2">
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
function validation(){
var user = document.getElementById('user').value;
var pass = document.getElementById('pass').value;
var confirmpass = document.getElementById('conpass').value;
var mobileNumber = document.getElementById('mobileNumber').value;
var emails = document.getElementById('emails').value;
if(user == ""){
document.getElementById('username').innerHTML =" ** Please fill the username field";
return false;
}
if((user.length <= 2) || (user.length > 20)) {
document.getElementById('username').innerHTML =" ** Username lenght must be between 2 and 20";
return false;
}
if(!isNaN(user)){
document.getElementById('username').innerHTML =" ** only characters are allowed";
return false;
}
if(pass == ""){
document.getElementById('passwords').innerHTML =" ** Please fill the password field";
return false;
}
if((pass.length <= 5) || (pass.length > 20)) {
document.getElementById('passwords').innerHTML =" ** Passwords lenght must be between 5 and 20";
return false;
}
if(pass!=confirmpass){
document.getElementById('confrmpass').innerHTML =" ** Password does not match the confirm password";
return false;
}
if(confirmpass == ""){
document.getElementById('confrmpass').innerHTML =" ** Please fill the confirmpassword field";
return false;
}
if(mobileNumber == ""){
document.getElementById('mobileno').innerHTML =" ** Please fill the mobile NUmber field";
return false;
}
if(isNaN(mobileNumber)){
document.getElementById('mobileno').innerHTML =" ** user must write digits only not characters";
return false;
}
if(mobileNumber.length!=10){
document.getElementById('mobileno').innerHTML =" ** Mobile Number must be 10 digits only";
return false;
}
if(emails == ""){
document.getElementById('emailids').innerHTML =" ** Please fill the email idx` field";
return false;
}
if(emails.indexOf('@') <= 0 ){
document.getElementById('emailids').innerHTML =" ** @ Invalid Position";
return false;
}
if((emails.charAt(emails.length-4)!='.') && (emails.charAt(emails.length-3)!='.')){
document.getElementById('emailids').innerHTML =" ** . Invalid Position";
return false;
}
}
</script>
</body>
</html>
When it comes to implementing form validation, combining HTML, CSS, and JavaScript provides a comprehensive solution. If you’re interested in a practical example, check out this insightful article on Bootstrap Login and Registration Form. This article not only guides you through creating an aesthetically pleasing form but also demonstrates how to integrate form validation seamlessly.
