Building a simple contact form with Angularjs and php. User data security Why was this form installed?

Here you can use the data from the form above.

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 with the following information:

Login:[[+ username]]

Password:[[+ password]]

Thank you,
Site Administration Example.Com

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

The final touch remains to create a resource to which the user will go from the letter to update the password. In this resource, we need a call:

[[! ResetPassword: empty = `

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

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

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

2. Create chunks with a 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 badge of the authorized user.

5. Create a chunk with a 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 a password recovery form, chunk Auth.ForgotPass.Sent with a message about the successful sending of the letter, chunk Email.ForgotPass with a letter to reset the password.

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 about successful password reset.

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

Foolproof 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, then 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 must not be less than zero or more than ten.

Why is incorrect information being entered? This is mainly due to three reasons.

1. The user made a mistake by accident, for example, inattentively read what he needs to indicate.
2. On a web page, they are ambiguously asked to enter data, so the user has to guess and make an assumption about what they really want from him. In this case, the views of the developer and the user do not always coincide.
3. There are a number of people who take instructions as a challenge and try to do the opposite. Such users reason like this: “Yeah, I'm asked to enter a number. What happens if I indicate the letters? " After that, they ask obviously incorrect information and see what it will lead to.

It should be understood that precise and correct formulations, although they reduce the likelihood of errors, in no way save you from them. Only technical means on the server side allow you to get the desired result and avoid entering incorrect information. Nevertheless, revision or, as it is also called, client-side validation allows you to quickly check the data entered by the user for correctness, without submitting the form to the server. This saves the user time and reduces the load on the server. From the point of view of usability, there are also pluses - the user immediately receives a message about what information he indicated incorrectly and can correct his mistake.

Obligatory field

Some form fields must be filled in before sending them to the server. This, for example, applies to the registration form, where you are required to enter a username and password. The required attribute is used to specify required fields, 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. one.

Rice. 1. Required field is not filled

Correctness of data

Initially, there are two fields in which the data entered by the user is checked automatically. This is the web address and email address. The Chrome browser also checks the calendar data field for validity, but only because it does not have a click-to-select calendar interface. These elements are characterized by the following rules.

• 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 first-level domain.

Browsers have slightly different policies for validating user data. For example, Opera automatically substitutes the http: // protocol in front of the entered text, while other browsers expect it from the user. Chrome and Opera require a dot to be in the mailing address, it is optional for Firefox.

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

Example 2. Correctness of data

HTML5 IE 10+ Cr Op Sa Fx

Opera only validates a form element if the name attribute is present.

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 categorized as one type of form element, so you have to use a text box for it. Moreover, their input takes place according to a certain standard. So, the IP address contains four numbers separated by a dot (192.168.0.1), the postal code of Russia is limited to six digits (124007), the phone contains a city 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 validates user input according to it. For this, the pattern attribute is used, and its value is a regular expression. Some typical values ​​are listed in table. one.

Example 3 asks for 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. 3 shows a warning in the Chrome browser.

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

Cancellation of validation

Validation is not always required for a form, for example, a developer wants to use a universal solution in JavaScript and he doesn't need duplicate validation by the browser. In such cases, you need to disable inline validation. For this, the novalidate attribute of the tag is applied.

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.

For any web developer, there is no more serious problem yet than the complete cross-browser compatibility of his product. Probably, this is one of the main tasks of a good specialist: to ensure that his site is always displayed correctly in all browsers.

Parameter required which is sometimes used for input does not work in ancient IE, which simply cannot be left that way. Retired users who still use IE6 should be just as easy on your site as users of the latest version of Google Chrome. Who other than web developers can take care of them.

About painful, about Internet Explorer

For normal browsers like Firefox, Opera and Google Chrome, this task is relatively easy. Even older versions of these browsers render html-code equally well, unless of course some new technology is used in it. But to achieve this in browsers of the Internet Explorer family, it takes a huge effort.

Each version of the Internet Exlorer browser has its own unique stupidity. What works in IE6 may not work properly in IE7, and vice versa. This zoo of Microsoft has not been able to overcome even in the latest version of its browser.

I can't understand why browser developers can't just open up and read the W3C standards for site building.

Therefore, as a web developer, I have to act as a kind of "layer" between capricious browsers and site visitors requiring knowledge and spectacles. And it's great that web-developers have succeeded so far.

So how do you get required to work in older versions of IE?

JS comes to our rescue. Previously, I could not stand it, but now I do not see a further way without it in the vastness of the "correct" WEB.

I did not invent the solution below myself, but took it from a bourgeois blog. Since I am greedy, and the blog is bourgeois, I will not link to it.

The function will be responsible for everything. fnCheckFields ()... Place the JS code on your website:

It is usually recommended to place it between html tags HEAD at the beginning of the page, but I would still recommend placing it at the very bottom of the page before the closing tag BODY... Thus, JS has less impact on page load speed.

The input window, where the required parameter must be entered, should look like this in html language:

This script works very simply: after clicking the button send, the script checks all inputs for the presence of the required parameter and if it finds it, then it looks at the entered value of this field accordingly. If nothing is entered into such an input, then a warning window about the need for input is displayed. Accordingly, the data is not sent anywhere.

It is also remarkable that if you have a normal browser that has already learned to understand this parameter as expected, such a warning window will not pop up and the standard tools for processing the required parameter for your browser will work.

Share on social media networks