Javascript form filling. Creation of HTML forms. Step by step registration form using jQuery

This tutorial describes how to create JavaScript form, which checks that the visitor has filled in the fields correctly before sending the data to the server. We'll first explain why form validation is a useful technique, and then we'll build a simple example explaining how it works.

Form validation is a process in which form data is verified before processing. For example, if your form has a field in which the user must enter email address, you may want to check that the field is complete before processing the form further.

There are two main methods for checking the completion of a form: on the server side (using CGI scripts, ASP, etc.) and on the client side (usually using JavaScript). Server-side validation is more secure, but in most cases requires more complex code, while client-side validation is simpler and faster (the browser does not need to connect to the server to validate the form, so the user receives an immediate response if missing fields that need to be filled in).

Client-side form validation. Typically performed using an embedded JavaScript script.

Server-side form validation. Typically done using a CGI or ASP script.

IN this lesson we will build simple form with client side validation with using JavaScript. You can then adapt it to suit your needs.

Let's build a simple form with fill checking using a script. This form has one text field “Your name” and a button for submitting data. Our script checks that the user has entered their name before sending the data to the server.

Open the form and see it in action. Try clicking the "Submit Data" button without entering anything in the "Your name" field.

The page contains a JavaScript function called validate_form(). It checks that the form is complete. let's look at the shape first.

The first part of the form is the form tag

The form is named contact_form. With its help, we will access the form from the JavaScript validation function.

The form uses a postmethod to send data to a stub htm file, which simply displays a message. In fact, you can send data to your CGI script, ASP page, etc. (for example to send mail).

The form tag also contains an onsubmit attribute for JavaScript call validation functions validate_form() when the Submit Data button is clicked. The function returns a Boolean value, for which true means "the check was successful" and false means "data is on hold." This way we can prevent the form data from being submitted if the user has not filled it out correctly.

The rest of the form code adds the contact_name input field and the "Submit data" button:

Please enter your name.

Your name:

The form validation function validate_form() is built into the head section at the beginning of the page:

The first line () tells the browser what comes next JavaScript code, and the HTML comment (