Week 10

Client-Side Form Validation

Form validation happens when a user enters information and the browser and server check to see if the input is valid.

Reasons to Validate

• We want the user's data in the correct format.
• We want the user's info protected. This can be done by making the user enter a secure password.
• We want to make sure we are protected from malicious users.

Types of Client-Side Validation

• Built-in Form Validation
• JavaScript

Built-in Form Validation

• required: tells if something has to be filled in before being submitted.
• minlength, maxlength: Tells the min and max length of data
• type: number, email, or other preset type
• pattern: A regular expression pattern that the data must follow

If an element is valid, you can use the :valid CSS psuedo-class. If an element is invalid, you can use :invalid.

Regular Expressionn Validation

• a — Matches one character that is a (not b, not aa, and so on).
• abc — Matches a, followed by b, followed by c.
• ab?c—Matches a, optionally followed by a single b, followed by c. ( ac or abc)
• ab*c—Matches a, optionally followed by any number of bs, followed by c. ( ac , abc, abbbbbc, and so on).
• a|b — Matches one character that is a or b.
• abc|xyz — Matches exactly abc or exactly xyz (but not abcxyz or a or y, and so on).

Constrain Entry Values

If the user types in a number outside the range, it will be invalid.

JavaScript Form Validation

Constraint Validation API

Methods and properties are available on these elements:

• HTMLButtonElement (represents a button element)
• HTMLFieldSetElement (represents a fieldset element)
• HTMLInputElement (represents an input element)
• HTMLOutputElement (represents an output element)
• HTMLSelectElement (represents a select element)

These are some of the properties available:

• validationMessage: Returns a localized message describing the validation constraints that the control doesn't satisfy
• patternMismatch: Returns true if the value does not match the specified pattern, and false if it does match.
• typeMismatch: Returns true if the value is not in the required syntax (when type is email or url), or false if the syntax is correct.
• valid: Returns true if the element meets all its validation constraints, and is therefore considered to be valid, or false if it fails any constraint.
• valueMissing: Returns true if the element has a required attribute, but no value, or false otherwise.

Here are some of the methods available:

• checkValidity(): Returns true if the element's value has no validity problems; false otherwise
• setCustomValidity(message): Adds a custom error message to the element.

Using Fetch

A Basic Fetch Request

fetch('http://example.com/movies.json')
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
});

Response Objects

When a fetch() promise is resolved, it returns a response instance. The most common properties are: Response.status, Response.statusText, and Response.ok

See notes.js file for more examples and notes.