Form Validation
Requiring an Input

Sometimes we have fields in our <form>s which are not optional, i.e. there must be information provided before we can submit it. To enforce this rule, we can add the required attribute to an <input> element.

Take for example:

<form action="/example.html" method="POST"> <label for="allergies">Do you have any dietary restrictions?</label> <br> <input id="allergies" name="allergies" type="text" required> <br> <input type="submit" value="Submit"> </form>

This renders a text box, and if we try to submit the <form> without filling it out we get this message:

message pop up prompting user to fill in the field

The styling of the message varies from browser to browser, the picture above depicts the message in a Chrome browser. We’ll also continue to show these messages as they appear in Chrome in later exercises.

Let’s see how it shows up in your browser!



Currently, in the provided <form>, the user can submit it without putting any values inside the input field.

Let’s change that by adding a required attribute to the existing <input>.

After you clear this checkpoint, try submitting the <form> without filling out the fields.

Folder Icon

Take this course for free

Already have an account?