You can use the data from the form above here.

Email.ForgotPass:

[[+fullname]],

To activate your new password, please visit the following link:

I want a new password

If everything went well, you will be able to log into your profile using the following data:

Login:[[+username]]

Password:[[+password]]

Thank you,
Administration of the site Example.Com

Everything is very similar to the activation letter chunk, only the password here is generated in the snippet.

The final step is to create a resource that the user will go to from the email to update the password. In this resource we need a call:

[[!ResetPassword:empty=`

This code will display a message if someone suddenly visits this page again or just by accident. And if the password is successfully reset, a message will be displayed from the chunk Auth.ForgotPass.Reset:

Now we have a fully working user authorization and registration system. Changing the profile of authorized users will be left outside the scope of this article.

1. Create a registration page and add a snippet call to it Register.

2. Create chunks with the registration form Register.Form and activation letter Email.Activation.

3. Create a registration confirmation page and place a snippet call on it ConfirmRegister.

4. Add a snippet call Login where we want to place the login form and the authorized user badge.

5. Create a chunk with the login form Auth.Login , chunk with information about the authorized user Auth.Logout , chunk with error message Auth.Login.Error .

6. Create a password recovery page and place a snippet call on it ForgotPassword.

7. Create a chunk Auth.ForgotPass.Form with password recovery form, chunk Auth.ForgotPass.Sent with a message about the successful sending of the letter, chunk Email.ForgotPass with a password reset email.

8. Create a resource with a final password reset and place a snippet call in it ResetPassword.

9. Create a chunk Auth.ForgotPass.Reset with a message indicating that the password was reset successfully.

That's all. I will be glad to any additions and comments.

When building web applications, it is important to take security seriously, especially when you have to deal with obtaining data from users.

A general security rule is to trust no one, so you can't rely on users to always enter the correct values ​​into forms. For example, instead of entering the correct email address in the field, the user may enter an incorrect address, or even some malicious data.

When it comes to validating user data, it can be done either on the client side (in the web browser) or on the server side.

Previously, client-side validation could only be done using JavaScript. But everything has changed (or almost changed), since with the help of HTML5, validation can be done in the browser, without the need to write complex validation scripts in JavaScript.

Form Validation Using HTML5

HTML5 provides a fairly robust mechanism based on the following tag attributes : type , pattern and require . With these new attributes, you can offload some of the data validation functionality to the browser.

Let's look at these attributes to understand how they can help with form validation.

type attribute

This attribute tells which input field to display for data processing, for example the familiar field like

Some input fields already provide standard validation methods, without the need to write additional code. For example, checks the field to ensure that the entered value matches the template of a valid email address. If an incorrect character is entered into a field, the form cannot be submitted until the value is corrected.

Try playing around with the email field values ​​in the demo below.

There are also other standard field types, like , And for validating numbers, URLs and phone numbers, respectively.

Note: Phone number formats vary from country to country due to differences in number of digits in phone numbers and differences in formats. As a result, the specification does not define an algorithm for checking phone numbers, so at the time of writing this feature is poorly supported by browsers.

Luckily for us, phone number validation can be done using the pattern attribute, which takes a regular expression as an argument, which we'll look at next.

pattern attribute

The pattern attribute will likely make many front-end developers jump for joy. This attribute accepts a regular expression (similar to the JavaScript regular expression format) that will be used to check the correctness of the data entered in the field.

Regular expressions are a language used to parse and manipulate text. They are often used for complex find and replace operations, as well as for checking the correctness of entered data.

Today, regular expressions are included in most popular programming languages, as well as in many scripting languages, editors, applications, databases, and command line utilities.

Regular expressions (RegEX) are a powerful, concise, and flexible tool for matching a string of text, such as individual characters, words, or character patterns.

By passing a regular expression as the value of the pattern attribute, you can specify what values ​​are acceptable for a given input field, as well as inform the user about errors.

Let's look at a couple of examples of using regular expressions to validate the value of input fields.

Phone numbers

As mentioned earlier, the tel field type is not fully supported by browsers due to inconsistencies in phone number formats in different countries.

For example, in some countries the format for telephone numbers is represented as xxxx-xxx-xxxx , and the telephone number itself will be something like this: 0803-555-8205 .

The regular expression that this pattern matches is: ^\d(4)-\d(3)-\d(4)$ . In code this can be written like this:

Phone Number:

Alphanumeric values

required attribute

This is a Boolean attribute used to indicate that the value of a given field must be filled in in order to submit the form. When you add this attribute to a field, the browser will require the user to fill out this field before submitting the form.

This saves us from implementing field validation using JavaScript, which can save developers some time.

For example: or (for XHTML compatibility)

All the demos you've seen above use the required attribute, so you can try it out by trying to submit the form without filling out any fields.

Conclusion

Browser support for form validation is pretty good, and for older browsers you can use polyfills.

It's worth noting that relying on browser-side validation alone is dangerous, as these checks can be easily bypassed by attackers or bots.

Not all browsers support HTML5, and not all data sent to your script will come from your form. This means that before finally accepting data from the user, it is necessary to check its correctness on the server side.

“Fool protection” is a set of measures to prevent the entry of incorrect information into a form. For example, if you need to enter a positive number from 0 to 10 in a field, you should check that the user does not enter text or a number that does not lie in the specified range, i.e. the number should not be less than zero and more than ten.

Why is incorrect information being entered? This is mainly done for three reasons.

1. The user accidentally made a mistake, for example, he inattentively read what he was required to indicate.
2. The web page asks for data in an ambiguous manner, leaving the user guessing and guessing what they really want. However, the opinions of the developer and the user do not always coincide.
3. There are a number of people who perceive instructions as a challenge and try to do the opposite. Such users reason something like this: “Yeah, they’re asking me to enter a number. What will happen if I indicate the letters?” Then they ask obviously incorrect information and see what it leads to.

It should be understood that precise and correct wording, although it reduces the likelihood of errors, does not in any way save you from them. Only technical means on the server side allow you to obtain the required result and avoid entering incorrect information. However, revision or, as it is also called, client-side validation allows you to quickly check the data entered by the user for correctness, without sending the form to the server. This saves user time and reduces the load on the server. From a usability standpoint, there are also advantages - the user immediately receives a message about what information he entered incorrectly and can correct his mistake.

Obligatory field

Some form fields must be completed before they are sent to the server. This, for example, applies to the registration form, where you are required to enter a login and password. To specify required fields, use the required attribute, as shown in Example 1.

Example 1. The required attribute

HTML5 IE 10+ Cr Op Sa Fx

Required fields must be filled in before submitting the form, otherwise the form will not be sent to the server and the browser will issue a warning about this. The type of message depends on the browser, for example Chrome displays a tooltip as shown in Fig. 1.

Rice. 1. Required field is not filled in

Data correctness

Initially, there are two fields in which user input is checked automatically. This is a web address and an email address. Chrome also checks the calendar field for validity, but only because it doesn't have a click-to-calendar interface. The following rules apply to these elements.

• Web address ( ) must contain the protocol (http://, https://, ftp://).
• E-mail address ( ) must contain letters or numbers before the @ symbol, after it, then a period and a first-level domain.

Browsers have slightly different policies for verifying user data. For example, Opera automatically inserts the http:// protocol in front of the entered text, while other browsers wait for it from the user. Chrome and Opera require a period in the email address; Firefox does not require it.

Example 2 shows a form with required fields in which two fields are validated by the browser.

Example 2: Data Correctness

HTML5 IE 10+ Cr Op Sa Fx

Opera only checks a form element if it has a name attribute.

What happens in Opera when you enter incorrect data is shown in Fig. 2.

Rice. 2. Warning about incorrect data

Input template

Some data cannot be classified into one of the form element types, so you must use a text field for it. At the same time, they are entered according to a certain standard. Thus, an IP address contains four numbers separated by a dot (192.168.0.1), the postal code of Russia is limited to six digits (124007), a telephone number contains an area code and a specific number of digits, often separated by a hyphen (391 555-341-42), etc. The browser needs specify an input template so that it checks the data entered by the user according to it. To do this, the pattern attribute is used, and its value is a regular expression. Some typical values ​​are listed in table. 1.

Example 3 asks you to enter a hexadecimal color value (#ffcc00) and if it is not in this range, the browser displays an error message.

Example 3. Input template

HTML5 IE 10+ Cr Op Sa Fx

In Fig. Figure 3 shows a warning in the Chrome browser.

Rice. 3. The entered data does not match the template

Unvalidation

Validation is not always required for a form; for example, a developer will want to use a universal JavaScript solution and will no longer need a duplicate check by the browser. In such cases, you need to disable built-in validation. To do this, use the novalidate attribute of the tag

For a similar purpose, the formnovalidate attribute is used, which is added to the button for submitting the form, in this case to the tag . In this case, the form from example 4 will look like this.