Learn how to create a robust signup form with HTML, CSS, and JavaScript. Our step-by-step guide will help you implement form validation like a pro.
Table of Contents
Signup form validation is a crucial aspect of web development. It ensures that the data entered by users is accurate and complete. In this guide, we'll walk you through the process of creating a robust signup form with HTML, CSS, and JavaScript.
Join My Telegram Channel to Download the Project Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Source Code
Step 1 (HTML Code):
Start by creating the HTML structure for your form. Use the <form> element to define the form, and add input fields for user details such as username, email, and password. Don't forget to include a submit button.
Let's break down each part of the code:
1. <!DOCTYPE html>: This declaration specifies that the document is an HTML5 document.
2. <html lang="en">: This is the opening tag for the HTML document and indicates that the content is in the English language.
3. <head>: This section contains meta information and links to external resources that are important for the page but not directly visible to the user.
- <title>: Sets the title of the web page, which typically appears in the browser's tab or window title bar.
- <meta charset="UTF-8">: Specifies the character encoding of the document as UTF-8, which is a widely used character encoding for web content.
- <meta name="viewport" content="width=device-width">: This meta tag is used to make the page responsive to different screen sizes by adjusting the viewport width to the device's width.
- <link rel="stylesheet" href="styles.css">: Links an external CSS stylesheet called "styles.css" to apply styles to the page.
4. <body>: This is the main content section of the web page, where visible content is placed.
5. <div class="container">: A container div that wraps the entire content of the page. It is often used for layout and styling purposes.
6. <div class="header">: A div element containing a header with the text "CREATE ACCOUNT."
7. <form class="form" id="form">: A form element with the class "form" and the ID "form." This form will contain input fields for user registration.
8. Inside the form, there are several <div class="form-control"> elements, each representing a form field. Each form control div contains:
- <label>: A label describing the input field (e.g., "Username," "Email," "Password," "Confirm Password").
- <input>: An input field where users can enter their information. The type attribute specifies the input's type (text, email, password), and the id attribute gives each input a unique identifier.
- <i>: Two icons represented by <i> elements. These icons are placeholders for visual feedback and may change based on user input. The "fas" class suggests the use of Font Awesome icons.
- <small>: A small element that typically contains error messages related to the input field.
9. <button>: A submit button within the form. Clicking this button will trigger the form submission.
10. <script src="script.js"></script>: A reference to an external JavaScript file named "script.js." This file contains client-side scripting, which may be used for form validation or other dynamic functionality on the page.
Step 2 (CSS Code):
Make your form visually appealing and user-friendly with CSS. Apply styles to form elements, buttons, and error messages. This step ensures that your form is not only functional but also aesthetically pleasing.
Let's break down the code step by step:
1. * Selector:
- The * selector selects all elements on the page.
- The box-sizing property is set to border-box. This ensures that an element's padding and border are included in its total width and height, making it easier to work with element sizing.
2. body Selector:
- Styles for the <body> element of the page.
- background-color is set to #8e89cf, giving the body a lavender background color.
- display is set to flex, which allows for flexible layout options.
- align-items and justify-content are set to center, centering the content both vertically and horizontally within the body.
- min-height is set to 100vh, ensuring that the body's minimum height is equal to the viewport height, making sure the content fills the screen.
- margin is set to 0, removing any default margins.
3. .container Selector:
- This styles an element with the class container.
- background-color is set to #fff, giving it a white background color.
- border-radius creates rounded corners with a radius of 5 pixels.
- box-shadow adds a subtle shadow beneath the container.
- width is set to 400px, and max-width is set to 100%, ensuring the container is no wider than the viewport.
- overflow is set to hidden, hiding any content that overflows the container.
4. .header Selector:
- Styles an element with the class header.
- background-color is set to a light gray shade.
- border-bottom adds a 1-pixel gray border at the bottom.
- padding provides spacing inside the header.
5. .header h2 Selector:
- Styles the <h2> element within the .header.
- margin is set to 0, removing any default margins.
6. .form Selector:
- Styles an element with the class form.
- padding provides spacing inside the form.
7. .form-control Selector:
- Styles elements with the class form-control.
- margin-bottom adds space below each form control.
- padding-bottom adds additional spacing at the bottom.
- position: relative is set for positioning child elements.
8. .form-control label Selector:
- Styles <label> elements within .form-control.
- display: inline-block makes labels display inline with the flow of the text.
- margin-bottom adds space below the label.
9. .form-control input Selector:
- Styles <input> elements within .form-control.
- Sets various properties like border, border-radius, width, font size, and padding.
10. .form-control i Selector:
- Styles <i> elements within .form-control.
- These elements are positioned absolutely and are initially hidden.
11. .form-control small Selector:
- Styles <small> elements within .form-control.
- These elements are positioned absolutely and are initially hidden.
12. .form button Selector:
- Styles buttons within .form.
- Sets properties like background color, border, text color, padding, width, font size, and border radius for the buttons.
13. .form-control.success and .form-control.error Selectors:
- These selectors are used to style form controls differently based on success or error conditions.
- They change the border color and display icons and text accordingly. For success, the border color is green, and for errors, the border color is red, along with appropriate icons and text color changes.
*{
box-sizing: border-box;
}
body{
background-color: #8e89cf;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
margin: 0;
}
.container{
background-color: #fff;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
width: 400px;
max-width: 100%;
overflow: hidden;
}
.header{
background-color: #f7f7f7;
border-bottom: 1px solid #f0f0f0;
padding: 20px 40px;
}
.header h2{
margin: 0;
}
.form{
padding: 30px 40px;
}
.form-control{
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.form-control label{
display: inline-block;
margin-bottom: 5px;
}
.form-control input{
border:2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-size: 14px;
width:100%;
padding:10px;
}
.form-control i{
position: absolute;
top: 40px;
right: 10px;
visibility: hidden;
}
.form-control small{
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.form button{
background-color: #8e44fd;
border:2px solid #8e44fd;
color: #fff;
display: block;
padding: 10px;
width:100%;
font-size: 16px;
border-radius: 4px;
}
.form-control.success input{
border-color: #2ecc71;
}
.form-control.error input{
border-color: #e74c3c;
}
.form-control.success i.fa-check-circle{
visibility: visible;
color: #2ecc71;
}
.form-control.error i.fa-exclamation-circle{
visibility: visible;
color: #e74c3c;
}
.form-control.error small{
visibility: visible;
color: #e74c3c;
} Step 3 (JavaScript Code):
Implement basic form validation using JavaScript. Check if required fields are filled, validate email addresses, and ensure that passwords meet specific criteria. Use simple conditional statements for this purpose.
Let me break it down step by step:
1. The code begins by selecting several HTML elements by their IDs and storing them in variables:
- form represents a form element with the ID "form."
- username represents an input field with the ID "username."
- email represents an input field with the ID "email."
- password represents an input field with the ID "password."
- confirm represents an input field with the ID "confirm."
2. An event listener is added to the form element, which listens for the "submit" event. When the form is submitted, it prevents the default form submission behavior using e.preventDefault() and calls the checkInputs() function.
3. The checkInputs() function is defined to perform input validation. It does the following for each input field:
- Removes leading and trailing spaces from the input value using trim().
- Checks if the input value is empty, and if so, it calls the setError() function to display an error message and apply an "error" class to the input field's parent element.
- If the input value is not empty, it calls the setSuccess() function to apply a "success" class to the input field's parent element.
4. The setError(input, msg) function is used to display error messages and apply an "error" class to the parent element of the input field. It takes two parameters:
- input: The input field for which an error should be displayed.
- msg: The error message to be displayed.
5. The setSuccess(input) function is used to apply a "success" class to the parent element of the input field to indicate that the input is valid. It takes one parameter:
- input: The input field to mark as successful.
6. The isemail(email) function is used to validate the email address format. It uses a regular expression to check if the provided email is in a valid format. If the email format is invalid, it returns false, and if it's valid, it returns true.
7. Finally, the code uses various conditional statements to check the validity of the username, email, password, and confirm password fields. If any of these fields are empty or don't meet specific criteria, error messages are displayed, and the "error" class is applied. If the fields are valid, the "success" class is applied.
const form=document.getElementById("form");
const username=document.getElementById("username");
const email=document.getElementById("email");
const password=document.getElementById("password");
const confirm=document.getElementById("confirm");
form.addEventListener("submit",(e)=>{
e.preventDefault();
checkInputs();
});
function checkInputs(){
// to prevent from spaces we use trim
const usernamevalue=username.value.trim();
const emailvalue=email.value.trim();
const passwordvalue=password.value.trim();
const confirmvalue=confirm.value.trim();
if(usernamevalue === ''){
// add error class
setError(username,"This field cannot be blank !!!!!!");
}
else{
// add success class
setSuccess(username);
}
if(emailvalue === ''){
// add error class
setError(email,"This field cannot be blank !!!!!!");
}
else if (!isemail(emailvalue)){
setError(email,"Check the email dude !!!!!!");
}
else{
// add success class
setSuccess(email);
}
if(passwordvalue === ''){
// add error class
setError(password,"This field cannot be blank !!!!!!");
}else if(passwordvalue.length<=4){
setError(password,"Password is too small!!")
}
else{
// add success class
setSuccess(password);
}
if(confirmvalue === ''){
// add error class
setError(confirm,"This field cannot be blank !!!!!!");
}else if(passwordvalue !== confirmvalue){
setError(confirm,"Dude ! Password and Confirm Password must be same.")
}
else{
// add success class
setSuccess(confirm);
}
}
function setError(input,msg){
const formControl=input.parentElement;
const small=formControl.querySelector("small");
small.innerText=msg;
// add error class
formControl.className="form-control error";
}
function setSuccess(input){
const formControl=input.parentElement;
formControl.className="form-control success";
}
function isemail(email){
return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(email);
}Final Output:
Conclusion:
Congratulations! You've mastered the art of signup form validation. By following these steps and best practices, you can create a secure and user-friendly registration process for your website. Form validation is a crucial part of web development, and you now have the skills to implement it effectively. Happy coding!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
