About Basic JavaScript Validation

JavaScript can be used to validate forms.

HTML Form

This HTML Form shows a simple form with validation.

Both fields use the same validation routine.

The validation is triggered onblur i.e. when data is entered in the field and the field loses focus.

The validation is also triggered when the Submit Value button is used to send the details to the server so the form should only submit when the values are correct.

One of the input fields is plain text, and the other is set to only accept number.

The validation failure is shown to the user via a JavaScript alert.

Bugs

This page has at least one bug, so it is possible to use this form as a testing exercise as well as practicing automating.

Results Page

The results page will show you the details you typed in.

There are a lot of location possibilities and attributes on the results page to assert that your entered details are passed through to the server.

Dev Tools

Use the dev tools to inspect and explore the page DOM to understand the controls.

You could also review the JavaScript and check the validation mechanisms.

Help keep this site free by joining our Patreon Membership site. Membership costs as little as $1 a month and includes access to exclusive e-books and online training courses.