Other Text Form - Instructions

This form has complex UI text input controls.

You can make fields required, which is a validation that is checked on form submission. Any field that is required must have a value provided.

You can also add Validation attributes to the TextArea, the select does not support validation attributes because you can only send valid data.

Reset & Submit

The two main form controls provided are reset and submit.

Reset will cancel any inputs and reset the form back to its defaults.

Submit will apply validation and send the details to the server.

JavaScript

The form also has JavaScript controls. These can:

  • validate the form prior to submitting it to show any errors on screen
  • trigger the submit process to ‘validate and submit’
  • submit the form regardless of any validation issues.

It is important to realise that it is possible to submit forms, regardless of the validation imposed on them at the front end. Which is why the back-end server should also be validating the input data sent to it.

Testing

Explore the JavaScript functionality for sending forms and ensure you know multiple ways of bypassing the validation of forms to allow you to test back end validation.

Check the validation.

Check the required for dropdowns.

Amend the validation attributes in the DOM and send ‘invalid’ data to the server.

The HTML for select does not support validation attributes because the assumption is that you can only send valid data. Explore the select in the DOM or via JavaScript and demonstrate that this assumption is not true. It is possible to send invalid data to the server from a select (as you can with any input element).

Automating

  • Try to automate all the actions.
  • Automate with required on, and required off.
  • Automate with validation on and off.

You can learn more about Testing Input Elements in our reference section.