Form validation with HTML and CSS
Form validation is an essential part of creating user-friendly and secure web forms. By implementing form validation, we can ensure that the data submitted by users meets the required criteria. Let's go through the process of building a form validation using HTML and CSS.
Step 1: Setting structure
Let's set up the basic HTML structure for our form. Create an HTML document with the necessary elements for our form:
<!DOCTYPE html><html><head><title>Form Validation</title></head><body><form><!-- Form elements --></form></body></html>
In the code above, we started with the DOCTYPE declaration and wrap our form within the <form> tags.
Step 2: Adding input fields
Inside the form, add input fields for users to enter their information. Include appropriate labels and placeholders.
Labels are needed to help identify the purpose of each input field.
Placeholders are required to help keep track if the user has entered something yet or not, and to add styling for invalid input.
<form><div><label for="name">Name:</label><br /><input type="text" id="name" placeholder=" " ><span class="error">Please enter your name</span></div><div><label for="email">Email:</label><br /><input type="email" id="email" placeholder=" " ><span class="error">Please enter a valid email address</span></div><div><label for="password">Password:</label><br /><input type="password" id="password" placeholder=" "><span class="error">Please enter a valid password</span></div></form>
In the code above, error messages are included within <span> elements with the error class. These messages are initially hidden and can be displayed dynamically when validation fails or specific conditions are not met. They provide feedback to users about any errors or missing information related to the input fields.
Step 3: Adding required attribute
To enforce mandatory fields, add the required attribute to the input fields that must be filled out by the user. This attribute ensures that users cannot submit the form without providing the required information.
<form><div><label for="name">Name:</label><br /><input type="text" id="name" placeholder=" " required><span class="error">Please enter your name</span></div><div><label for="email">Email:</label><br /><input type="email" id="email" placeholder=" " required><span class="error">Please enter a valid email address</span></div><div><label for="password">Password:</label><br /><input type="password" id="password" placeholder=" " required><span class="error">Please enter a valid password</span></div></form>
Step 4: Adding pattern attribute
For fields with specific patterns, such as passwords or phone numbers, add the pattern attribute. The pattern attribute takes a regular expression as its value, allowing us to define the required pattern for the field.
Regular expressions are powerful tools that help validate input based on specific rules.
pattern ensures that users enter data in the correct format.
<div><label for="password">Password:</label><br /><input type="password" id="password" placeholder=" " pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$" required><span class="error">Please enter a valid password</span></div>
In the code above, the regular expression ^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,}$ ensures that the password field contains the following:
At least one lowercase letter
One uppercase letter
One digit
Length minimum eight characters
The email field has an
Step 5: Adding styling
To enhance the user experience, we can style the error messages associated with the input fields. Using CSS selectors, we can control the display and color of the error messages when the fields are invalid.
form > div > span.error {display: none;font-size: 0.8em;position: absolute;}form > div > input:invalid:not(:focus):not(:placeholder-shown) ~ .error {display: block;color: red;}
In the CSS code above, we select the error message elements using the form > div > span.error selector. We initially set their display to none to hide them on form loading.
Then, we use the input:invalid:not(:focus):not(:placeholder-shown) selector to target invalid input fields that are not in focus and do not have a placeholder value. When an invalid input field matches these conditions, the associated error message is displayed and color is set red to draw attention to the error.
Step 6: Running code
Place the code in appropriate files and open the HTML file in a web browser. Following is an example of a form that allows users to input their name, email, and password. The form includes basic validation to ensure that the entered data is valid and meets certain criteria.
