Number Input Form - Instructions

This form has number 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. For number fields these are min, max and step.

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.

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

Experiment by adding invalid numeric data into the value of the fields, see what is sent 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.