Form validation (required, pattern)

Hello, students! In this lesson, we will learn about form validation.

Forms are used to collect information from the user.

Form validation is important to ensure that the information provided by the user is valid.

Topics

• What is form validation?
• Required validation
• Pattern validation
• Code examples

What is form validation?

Form validation is the process of checking whether the information provided by the user is valid.

Form validation can be done using JavaScript, PHP, or other programming languages.

Required validation

Required validation is a form of validation that checks if an input field is filled out.

To use required validation, use the required attribute on the input element.

Here is an example of code to use required validation:

<input type="text" name="name" required>

This code will create a name input field that is required.

If the user does not fill out the name input field, the form will not be submitted.

Pattern validation

Pattern validation is a form of validation that checks if an input field matches a specific pattern.

To use pattern validation, use the pattern attribute on the input element.

The pattern attribute specifies the pattern that the input field must match.

Here is an example of code to use pattern validation:

<input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,6}$">

This code will create an email input field that must match the pattern of a valid email address.

If the user does not enter a valid email address, the form will not be submitted.

Code examples

Here are some examples of code to use form validation:

<form action="submit.php">
  <input type="text" name="name" required>
  <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,6}$">
  <input type="submit" value="Submit">
</form>

This code will create a form with two input fields: name and email.

The name input field is required, and the email input field must match the pattern of a valid email address.

Exercises

• Create a form with the input fields name, email, and age.
• Validate the name and email input fields as required.
• Validate the age input field as an integer.
• Save the document and open it in a browser.

Observe how the browser displays the form.

Try clicking the submit button.

Good luck!

Conclusion

Form validation is an important tool to ensure that the information provided by the user is valid.

Understanding how to use form validation is essential for creating effective forms.

In the next module, we will learn about semantic elements.

In the next module, we will learn about semantic elements, which are HTML elements that provide information about the meaning of the content they contain.

For example, the header element is used to indicate the header of a page.

Understanding semantic elements is important for creating web pages that are easier to understand for humans and search engines.