Form validation

Question 1

Sometimes we have fields in our <form>s which are not optional, i.e. there must be information provided before we can submit it. how would you enforce this rule?

Answer 1

You can add the required attribute to an <input></input> element.
<input></input>

Question 2

How do you assign a minimum and maximum value for a number field?

Answer 2

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.
min=“5” max =“10”

Question 3

How do you set the minimum and maximum amount of characters for text fields?

Answer 3

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

Question 4

For cases when we want user input to follow specific guidelines, what attribute would we use?

Answer 4

Pattern attribute
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.

Question 5

When does client-side validation occur?

Answer 5

Client-side validations happen in the browser before information is sent to a server.