Hey! 👋🏼
Form Validation + Recap Dom manipulations
Redi School Munich - Spring 2021
Recap on DOM Manipulation
Kahoot!Recap: Forms & related concepts
<form>
- Contains interactive controls for submitting
- It can contain other elements such as <input>, <select>, <option>
<input>
- Is used to gather data from the user
- How it works will be dependant of their attributetype
- Every input should have an associated label
<select>
- It provides a menu of options
- Each option has a value represented by the <select> tag
<form>
- Contains interactive controls for submitting
- It can contain other elements such as <input>, <select>, <option>
In-class exercise!
30 minutes! 🕘
- Create a reservation form for a restaurant 🍝
- Ask for first and last name, e-mail, and number of guests
- Make use of labels, text inputs, a submit button and whatever you feel like you have learned so far
- Include a paragraph which indicates the booking status. The text should change from "Not booked" to "Booking for XY guests confirmed" on submission of the form. The guest number should be taken from the form input.
- Share your form with your class mates! (2 of you)
Form validation
Why?
- All required form controls are filled out
- Data has correct format
- Called client-side form validation
Why?
- We want to get the right data, in the right format
- We want to protect our users' data
- We want to protect ourselves
Options
- "This field is required" (You can't leave this field blank).
- "Please enter your phone number in the format xxx-xxxx" (A specific data format is required for it to be considered valid).
- "Please enter a valid email address" (the data you entered is not in the right format).
- "Your password needs to be between 8 and 30 characters long and contain one uppercase letter, one symbol, and a number." (A very specific data format is required for your data).
Built-in form validation
- required: Specifies whether a form field needs to be filled in before the form can be submitted
- minlength & maxlength: Specifies the minimum and maximum length of textual data (strings)
- min & max: Specifies the minimum and maximum values of numerical input types
- type: Specifies whether the data needs to be a number, an email address, or some other specific preset type
- pattern: Specifies a regular expression that defines a pattern the entered data needs to follow
Example
Example continued
Example continued
Example continued
Example continued
Styling based on validity with CSS pseudo-classes
input:invalid {
border: 2px dashed red;
}
input:valid {
border: 2px solid black;
}
More CSS pseudo-classes
- :optional Selects input elements with no "required" attribute specified
- :required Selects input elements with the "required" attribute specified
- Or display custom error messages!
In-class exercise!
30 minutes! 🕘
- Enable validation of your restaurant reservation form!
- Check that all fields are filled out
- Check that the input for party size is a number
- Verify that the mail adress that is entered is valid
- Add a red solid border to invalid input fields
Homework!
Implement this job application form or something similar for your project:
- All fields except skills table are required
- Email must be valid
- Length of "About You" section is restricted
- Name fileds can only contain strings
- Phone number must be numers only
- Date of birth must be valid