Working with forms in Javascript

Working with forms in Javascript is a very common task in web site development. Forms are one of the main forms of interaction between the user and the website, allowing him to send information and data to the application. With the use of Javascript, it is possible to add interactivity and validation to forms, making the user experience more pleasant and efficient.

Manipulating form elements

Before you start working with forms in Javascript, it's important to understand how to manipulate form elements. Form elements are identified by their names or IDs, and can be accessed using the document.forms property. For example:

// Accessing a form by name
var form = document.forms['myForm'];

// Accessing a text field by ID
var campoTexto = form.elements['name'];

With the form elements accessed, it is possible to change their values, add events and perform validations.

Form validation

One of the main tasks when working with forms in Javascript is the validation of data entered by the user. Validation can be performed at the time the user submits the form or in real time as the user fills in the fields.

To perform the validation, it is possible to use the events onsubmit, which is fired when the user submits the form, and onblur, which is fired when the user leaves the text field. For example:

// Validating a text field in the onblur event
textfield.onblur = function() {
  if (fieldText.value.length < 3) {
    alert('Name must be at least 3 characters long.');
    fieldText.focus();
  }
};

// Validating the form in the onsubmit event
form.onsubmit = function() {
  if (fieldText.value.length < 3) {
    alert('Name must be at least 3 characters long.');
    fieldText.focus();
    return false;
  }
};

In the example above, the text field is validated in the onblur event, checking that the value entered by the user has at least 3 characters. Otherwise, an alert is displayed and focus is held on the text field. In the onsubmit event, the validation of the form as a whole is performed, verifying that all fields have been filled in correctly.

Event handling

In addition to validation, it is possible to use Javascript to add interactivity to forms by handling events. For example, you can add an event to a text field that changes the value of another field when the user types something. For this, it is necessary to use the onkeyup event, which is triggered every time the user presses a key. For example:

// Adding an event to the text field
textfield.onkeyup = function() {
  var campoSaudacao = form.elements['saudacao'];
  campoSaudacao.value = 'Hello, ' + campoTexto.value + '!';
};

In the example above, the onkeyup event is used to add a value to the "greeting" text field every time the user types something into the "name" text field.

Conclusion

Working with forms in Javascript is an essential task in web site development. With the use of Javascript, it is possible to add interactivity and validation to forms, making the user experience more pleasant and efficient. By manipulating form elements, validating user-entered data, and adding interactivity to events, you can create more efficient and intuitive forms.

Next page of the Free Ebook:

11Form Validation with Javascript

2 minutes