form validation

Question 1

what is server side validation

Answer 1

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.

Question 1

what is validation

Answer 1

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.?

Question 2

what is client side validation

Answer 2

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.

Question 3

requirng an input before submission using required

Answer 3

here must be information provided before we can submit it. To enforce this rule, we can add the required attribute to an <input></input> element.

Take for example:

<form>
<label>Do you have any dietary restrictions?</label>
<br></br>
<input></input>
<br></br>
<input></input>
</form>

Question 4

using min= and max= attribute to set and min and max

Answer 4

form action=”/example.html” method=”POST”>
<label>Enter # of guests:</label>
<input></input>
<input></input>
</form>

Question 5

adding a min and max text length using minlengh= and maxlenght=

Answer 5

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:

<form>
<label>Summarize your feelings in less than 250 characters</label>
<input></input>
<input></input>
</form>

Question 6

what is matching a pattern

Answer 6

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. for example matching emails like outlook.com or gmail.com for example

Question 7

how to match a pattern using pattern attribute

Answer 7

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:

<form>
<label>Credit Card Number (no spaces):</label>
<br></br>
<input></input>
<input></input>
</form>

We might also want to limit usernames to only letters and numbers (and not special characters like ! or @).

To add this validation, add a pattern attribute and set it to: “[a-zA-Z0-9]+” in the first <input></input> element.

Question 8

Review all concepts

Answer 8

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.