JavaScript Form Validation

How to Create a Form Validation in JavaScript, HTML and CSS

How to Create a Form Validation in JavaScript


In this Javascript tutorial, we will learn how to create a form validation.
The script validates the name, email, and password fields, providing real-time feedback to users and preventing the submission of incomplete or incorrect data.




Project Source Code:


<!DOCTYPE html>
<html>
<head>
<title>Form Validation</title>

<style>
*{ box-sizing: border-box; margin: 0; padding: 0; }

#myForm{ display: flex; flex-direction: column;
max-width: 400px; padding: 20px;
margin: 20px auto; border-radius: 5px;
font-family: 'Segoe UI', Verdana, sans-serif;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

label{ font-weight: bold; margin-bottom: 5px; color: #555; }

input[type="text"],
input[type="email"],
input[type="password"]{ padding: 10px; margin-bottom: 10px;
border: none; border-radius: 3px;
background-color: #f2f2f2;
}
input[type="submit"]{ padding: 10px 20px; margin-top: 10px;
border: none; border-radius: 3px;
background-color: goldenrod;
color: #fff; cursor: pointer;
transition: all 0.3s ease;
}

</style>

</head>
<body>

<form id="myForm" onsubmit="return validateForm()">
<label>Name:</label>
<input type="text" id="name" name="name">

<label>Email:</label>
<input type="text" id="email" name="email">

<label>Password:</label>
<input type="password" id="password" name="password">

<input type="submit" name="submit" value="Submit">

</form>


<script>
function validateForm(){
// Get the values of the input fields
const name = document.getElementById("name").value;
const email = document.getElementById("email").value;
const password = document.getElementById("password").value;

// Check if the name field is empty
if(name === ""){

alert("Name must be filled out");
return false;
}
// Check if the email field is empty or invalid
if(email === ""){
alert("Email must be filled out");
return false;

}

else if(!validateEmail(email)){
alert("Invalid email format");
return false;
}

// Check if the password field is empty or too short
if(password === ""){

alert("Password must be filled out");
return false;

}

else if(password.length < 8){

alert("Password must be at least 8 character");
return false;

}

// If all input fields pass validation,
// return true to allow the form to be submitted
return true;

}

// Helper function to validate email format
function validateEmail(email){

const re = /\S+@\S+\.\S+/;
return re.test(email);

}
</script>


</body>
</html>



Code Explanation:

JavaScript Validation: 
The JavaScript script handles the form validation. It consists of a function called validateForm(), which is triggered when the form is submitted. Here's an overview of the validation steps performed:

1 - Retrieving Input Values: The function retrieves the values entered in the name, email, and password fields using the getElementById() method.

2 - Name Field Validation: It checks if the name field is empty. If it is, an alert message is displayed, and the function returns false, preventing form submission.

3 - Email Field Validation: It checks if the email field is empty or has an invalid format. If either condition is true, appropriate alert messages are displayed, and the function returns false.

4 - Password Field Validation: It checks if the password field is empty or shorter than eight characters. Similar to the previous validations, alert messages are displayed accordingly, and the function returns false.

5 - Successful Validation: If all input fields pass validation, the function returns true, allowing the form to be submitted.


OUTPUT:



JavaScript Form Validation

JavaScript Form Validation - Empty Fields

JavaScript Form Validation - Data Size







Share this

Related Posts

Previous
Next Post »