When you create on a website any form where the user will interact with the page you must take security seriously. We are all human and most common mistakes – the human factor, it is impossible to hope that users will always enter correct values to the form. For example, instead of typing in the correct email address user can enter an incorrect address, or even some harmful data. Therefore, data from the user must be checked!
When it comes to testing (validation) of user data, it can be carried out both on the client side (in a web browser) and server-side. It is important that the hope for validation only on the side of the browser is dangerous, because malicious users or bots can easily bypass these checks.
Now there are three ways to validate:
- HTML 5 validation (client side)
- JavaScript validation (client side)
- Server-side validation (using PHP, C# etc.)
Not all browsers support the HTML5, and not all data sent to your script, come with your form. This means that before finally accept data from the user we have to check on the accuracy of it on the server side.
Here I want to give an example of client side validation that personally tried the first week of classes at Humber College.
Validation form with HTML5
HTML5 provides a quite reliable mechanism based on the following attributes of the tag <input />: type, pattern and require. Thanks to these attributes, we can easily use the browser to verify the data.
The type attribute
This attribute shows which input field have to display what data, for example,
<input type = "text" />
will show a text box. Some input fields already provide standard validate methods, without writing additional code. For example,
<input type = "email" />
Field checks that the entered value matches the pattern the correct email address. If in the field a wrong character is inserted, form cannot be sent until the value is correct.
There are also other standard field types, such as
<input type="number" />, <input type="url" /> and <input type="tel" />
for the validation of numbers, URLs and phone numbers. Check the phone number in different countries is difficult, and for this, we just use the following attribute.
The pattern attribute
This attribute accepts a regular expression (similar to the format of JavaScript regular expressions), in which the correctness of the data entered in the field will be checked.
Regular expressions (RegEX) is a powerful, concise and flexible tool for matching strings of text, such as individual characters, words, or patterns of characters.
Consider the example of the use of this attribute to the user name on Twitter. This regular expression matches a user name on Twitter, to be preceded by the @ symbol, such as @ lenchezzz:
<input type="text" pattern="^@[A-Za-z0-9_]{1,15}$" >
Or, for example color in hex ( #3b5998 или #000) will look:
<input type="text" pattern="^#+([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$" >
Attribute required
This boolean attribute used to indicate that the value of this field is required to complete in order to submit the form. When you add this attribute field of the browser requires the user to fill in this field before sending the form.
It frees us from the sale of test fields using JavaScript, which can save a bit of time for developers.
For example:
<input type="text" name="my_name" required="required" />
To be continued …