My Useful tips for Validation Form in HTML

The life of a “Mr. Developer” must be that everyone has, is and will have to go through at least 1 time to do the data input form, or Input in general. Here are some examples of real HTML that make sure people don’t miss validation bugs.

As you know, needless to say:
HTML provides me with a number of attributes I can use to define validation forms. Okay, come on, kids.

This specifies the expression for the input value for the input before you click the submit button. Pattern can be used with a number of input types such as: text, date, tel, email, password, …etc.
The title is not used to validate the form but I can get more information about the data type that I will have to enter in the input box.
This field specifies that the input cell must not be empty before submission.
MinLength & MaxLength
This is simply the minimum and maximum length of the input value for the input cell. But it’s also important because it fits the respective requirements.
<input type=”text” minlength=”4″ required>
Using the correct input type can help with incorrect data type validation. Below is the input type you may need to validate your form.

1. Email: Use the “Email” type to validate the email data to ensure the data is in the correct format before the form is submitted. To check the validation of the email, we can add a pattern to ensure the output is in the correct email format. Eg:
pattern=”[a-z0-9._%+-][email protected][a-z0-9.-]+\.[a-z]{2,4}$”

2. Password: This one doesn’t need much introduction. but it is impossible not to mention because this is an input type that hides the password as a dot. Depending on the requirements and complexity of the password, we use the appropriate pattern to check the error condition.

<input type=”password” pattern=”(?=.*[a-z]).{6}” title=”Must contain at least 6 characters and at least 1 lowercase”>
3. Tel: Basically, the type “Tel” helps us determine the type of phone number input. Normally, it will support displaying a number keyboard to help limit the case when users enter alphanumeric characters. Personally, I will not check the phone number according to the length of the phone number. I simply give it a certain pattern format and it’s ok. Below is the pattern for “Tel” I often use.

<input type=”tel” pattern=”[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}” title=” Phone number format as +99(99)9999-9999″>
4. Number: This is simply that you check the input value is only a number and can check the value in the range you want.

<input type=”number” min=”2″ max=”8″>
The above example shows the required value between 2 and 8 and is optional.

Summarizing the Input type, here are some commonly used examples that are quite good for checking validation.

The input data validation will usually be done by the server side, because to ensure that the user cannot tamper with the data. In addition, some cases you can check on the user side in the ways I mentioned above. You can add a novalidate or custom text attribute to display a formatting error message to the user. Hopefully after this article you guys won’t get log bugs by common validations like this.

About the Author

Leave a Reply

Your email address will not be published. Required fields are marked *

You may also like these