Form Validations: HTML 5 & JavaScript

●Forms introduce essential HTML elements including

○tags

○attributes

○structure

Form validation helps

prevent malicious users from submitting harmful data or code.

●HTML5 has built in validation attributes.

ensures the user must fill in this field

required

defines the minimum and maximum acceptable values 

min and max

sets the maximum number of characters

maxlength

Uses regex to define a specific input format

pattern

Input types attribute changes (text, email, number, password, date, tel)

how browser validates and displays the input.

○text: No built-in validation

○email: checks for @ and domain

○number: Restricts to digits, allows min/max

○password: Masks text

○date: validates format

○tel: No strict validation but hints to mobile devices.

displays gray hint text

placeholder

Makes field not editable and unsubmittable

disabled

●Makes a field not editable but can still be submitted

readonly

JavaScript form validation does what

●checks user input before submitting the form to ensure it's correct. It helps catch errors and improves the user experience.

●You could validate forms in Javascript used two approaches

○Using Conditional Logic: which involves if-else conditions to validate input

○Using Regular Expressions (Regex): A more advanced approach where patterns are matched for validating inputs such as emails, passwords and usernames.