@MahmoodHashem
Posted
Hello there
Congratulations on successfully finishing the challenge!
Your project is absolutely amazing.
Here are a few suggestions that can further enhance your project:
HTML comes with a built-in form validation API that is widely supported by modern browsers. This API allows you to perform client-side form validation without the need to write complex regular expressions. Instead, you can leverage the HTML's built-in validation attributes and properties to handle form validation.
The key steps to implement form validation using the HTML validation API and JavaScript are as follows:
Add Validation Attributes to the Form and Input Fields :
- Add the
noValidateattribute to the<form>element to disable the browser's default form validation behavior. - Add the
requiredattribute to the input fields that should be mandatory. - Specify the appropriate
typeattribute for the input fields (e.g.,type="email"for email fields) to enable built-in validation for the specific input type.
<form action="" noValidate>
<input
type="email"
required
id="email"
placeholder="[email protected]"
/>
</form>
Handle Form Submission with JavaScript :
- Add an event listener to the
submitevent of the form. - Inside the event listener, call the
preventDefault()method to prevent the default form submission behavior. - Check the validity of the form fields using the
validityproperty, which provides various sub-properties likevalueMissingandtypeMismatch. - Based on the validity state, you can display appropriate error messages or perform other actions.
const form = document.querySelector('form');
const email = document.getElementById('email');form.addEventListener('submit', (e) => {
e.preventDefault(); if (email.validity.valueMissing) {
// Display "Please fill out this field" error
} else if (email.validity.typeMismatch) {
// Display "Please enter a valid email address" error
} else {
// Form is valid, proceed with submission
}
});
Hope you found that helpful
Keep up the hard work
