Special Format Form - Instructions

This form has complex UI 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.

HTML Form

This HTML Form shows a simple form with no server-side validation.

It contains a variety of input types introduced with HTML5:

  • colour picker
  • file
  • date and time
  • date
  • month
  • week
  • time

These controls are complex, but since they are implemented by the browser we don’t really need to ’test’ them, we need to test that the backend system can process the values in them and any custom JavaScript we have added can integrate with them.

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.

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.