Learn how to add attributes to inputs and validate the information a user provides in a form element! 

Form Validation

Ever wonder how a login page actually works? Or why the combination of a username and password grants you access to a website? The answers lie in _validation_. Validation is the concept of checking user provided data against the required data.

There are different types of validation. One type is _server-side validation_, this happens when data is sent to another machine (typically a server) for validation. An example of this type of validation is the usage of a login page. The form on the login page accepts username and password input, then sends the data to a server that checks that the pair matches up correctly. 

On the other hand, we use _client-side validation_ if we want to check the data on the browser (the client). This validation occurs before data is sent to the server. Different browsers implement client-side validation differently, but it leads to the same outcome.

Shared among the different browsers are the benefits of using HTML5's built-in client-side validation. It saves us time from having to send information to the server and wait for the server to send back confirmation or rejection of the data. This can also help us protect our server from malicious code or data from a malicious user. It also allows us to quickly give feedback to users for specific fields rather than having them fill in a form again if the data they input into the form was rejected. 

In this lesson, we'll learn how to add some validation checks to our `<form>`s!

Introduction to HTML Form Validation

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:

```html
<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](https://content.codecademy.com/courses/learn-html-forms/required%20field.png)

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! 
 

Requiring an Input

Awesome job adding client-side validation to `<form>`s! 

Let's quickly recap:
* Client-side validations happen in the browser before information is sent to a server.  
* Adding the `required` attribute to an input related element will validate that the input field has information in it.
* Assigning a value to the `min` attribute of a number input element will validate an acceptable minimum value. 
* Assigning a value to the `max` attribute of a number input element will validate an acceptable maximum value. 
* Assigning a value to the `minlength` attribute of a text input element will validate an acceptable minimum number of characters. 
* Assigning a value to the `maxlength` attribute of a text input element will validate an acceptable maximum number of characters. 
* Assigning a regex to `pattern` matches the input to the provided regex.
* If validations on a `<form>` do not pass, the user gets a message explaining why and the `<form>` cannot be submitted.

These quick checks help ensure that input data is correct and safe for our servers. It also helps give users immediate feedback on what they need to fix instead of having to wait for a server to send back that information.
 




Review

In addition to checking the length of a text, we could also add a validation to check how the text was provided. For cases when we want user input to follow specific guidelines, we use the `pattern` attribute and assign it a _regular expression_, or regex. Regular expressions are a sequence of characters that make up a search pattern. If the input matches the regex, the form can be submitted.

Let's say we wanted to check for a valid credit card number (a 14 to 16 digit number). We could use the regex: `[0-9]{14,16}` which checks that the user provided only numbers and that they entered at least 14 digits and at most 16 digits. 

To add this to a form:

```html
<form action="/example.html" method="POST">
  <label for="payment">Credit Card Number (no spaces):</label>
  <br>
  <input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}">
  <input type="submit" value="Submit">
</form>
```

With the `pattern` in place, users can't submit the `<form>` with a number that doesn't follow the regex. When they try, they'll see a validation message like so:

<img src="https://content.codecademy.com/courses/learn-html-forms/pattern.png" alt="message prompting user to follow the requested format" width="100%">

If you want to find out more about Regex, read more at the [Docs RegEx](https://www.codecademy.com/resources/docs/javascript/regexp?page_ref=catalog) entry.

To see it in practice, let's use the `pattern` attribute in our HTML! 
 

Matching a Pattern 

Another built-in validation we can use is to assign a minimum or maximum value for a number field, e.g. `<input type="number">` and `<input type="range">`. To set a minimum acceptable value, we use the `min` attribute and assign a value. On the flip side, to set a maximum acceptable value, we assign the `max` attribute a value. Let's see this in code: 

```html
<form action="/example.html" method="POST">
  <label for="guests">Enter # of guests:</label>
  <input id="guests" name="guests" type="number" min="1" max="4">
  <input type="submit" value="Submit">
</form>
```
If a user tries to submit an input that is less than 1 a warning will appear: 
<img src="https://content.codecademy.com/courses/learn-html-forms/min%20max%20attr.png" alt="prompt on a number field for user to input a value greater than or equal to 1">

A similar message will appear if a user tries to input a number greater than 4. Let's now see this action.
 

Set a Minimum and Maximum

In the previous exercise, we were able to use `min` and `max` to set acceptable minimum and maximum values in a number field. But what about text fields? There are certainly cases where we wouldn't want our users typing more than a certain number of characters (think about the character cap for messages on Twitter). We might even want to set a minimum number of characters. Conveniently, there are built-in HTML5 validations for these situations.

To set a minimum number of characters for a text field, we add the `minlength` attribute and a value to set a minimum value. Similarly, to set the maximum number of characters for a text field, we use the `maxlength` attribute and set a maximum value. Let's take a look at these attributes in code: 

```html
<form action="/example.html" method="POST">
  <label for="summary">Summarize your feelings in less than 250 characters</label>
  <input id="summary" name="summary" type="text" minlength="5" maxlength="250" required>
  <input type="submit" value="Submit">
</form>
```

If a user tries to submit the `<form>` with less than the set minimum, this message appears:

![prompt on a number field for user to length the input](https://content.codecademy.com/courses/learn-html-forms/minlength.png)

And if a user tries to type in more than the maximum allowed number of characters, they don't get a warning message, but they can't type it in! 

Let's add this validation to our `<form>`. 
