Not Finished

Hit the REFRESH/RELOAD button in your browser: if you still see this message, then this page isn't quite finished yet. Please come back again another time (make sure you refresh/reload next time you visit).

Form validation on the client-side can be done using HTML Constraint Validation, and more complex validation will require some JavaScript code.

Constraint Validation involves using special attributes that automatically cause form input data to validate when the user attempts to submit the form. JavaScript allows you to customize this functionality. For example, you can use simple HTML attributes to ensure that certain fields aren't left empty, to make sure fields follow a certain pattern (e.g. for decimal numbers or postal codes), to set the maximum allowed input characters, and even to make sure a numeric value is within a certain minimum and maximum range. To perform more complex validation such as making sure that the user doesn't enter a specific range of values when selecting a certain item or items in a list, or making sure a certain number of checkboxes has been checked, you would add additional validation code with JavaScript

Constraint Validation: Text Input

There are several attributes that allow you to perform basic client-side validation. You'll learn in term 2 that you shouldn't rely on these as your only means of validating input because they're not supported in all browsers, yet.

The example below creates a required field called userAge with a size of 5 and a maximum length of 3:

See the Pen Forms: Input Constraint Validation by Wendi Jollymore (@ProfWendi) on CodePen.