how much do you validate the form with only HTML - Part1

#html #webdev #uiweekly #beginners

I am going to create a series with form validation using HTML, Javascript and Angular.

This is the part - I using HTML only.

Validation: It's not advised to send whichever data entered by user to server. Hence validation is used for restricting and instructing user what kind of data to enter in form.

Several validation messages are:

This field is required.
Please enter a valid email address.
Your password needs to be between 8 to 10.

Types

Client Side Validation: Performed by web browser before input has been sent to web server

Server Side Validation: Performed by web server after input has been received.

So, this series only covers client side validation.

Let's start...

In HTML, form validation achieved using several attributes like.

type - Restricting the type of data using type attribute on input.
type="email" - only accepts email. Need to mention a pattern to validate an email.
type="password" - entered characters will become dots as it is intended for password.
Like that there are 20+ types are present. Which are directly restrict and prompt message what to enter. Those are: button, tel, text, date, time, datetime-local, color, file, hidden, image, month etc.

required - Input field must be filled before submitting the form. It works with following input types: text, search, url, tel, email, password, date, number, checkbox, radio, and file. It shows validation message as Please fill in this field when user doesn't fill and submits the form.

minLength - Specifies minimum number of characters required to enter before submitting the form. Works on: text, search, url, tel, email, and password. It will show error messages when length doesn't meet minLength and don't show any error message when no characters entered.

Shows error message as Please lengthen the text to x characters are more (You are currently using 1 character)

maxLnegth - Specifies maximum number of characters required to enter before submitting the form. Works on: text, search, url, tel, email, and password. It will restrict user to enter more characters after maxLength exceeds and don't show any error message anytime.

min & max: Specifies min and max values for input. Works on: number, range, date, datetime-local, month, time and week.

Empty value is accepted.
We can enter any value but shows error message on submit. As, If entered number is less than min then Value must be greater than or equal to min or if entered number is greater than max then Value must be less than or equal to max

pattern: Specifies a regular expression that the input value is checked against on form submission. Input type checks against given pattern and shows error message as Please match the format requested.

size: Specifies the visible width of the input.

multiple: Works on input & select to allow user to select multiple items.

And the code is here: github

Please do comment if I miss any. I am always happy to update this article.

Thanks.

You can follow me here: Twitter

Top comments (6)

Adam Crockett 🌀 • Nov 12 '22 • Edited

I'll add something useful, server side validation is the only secure validation and frontend validation is only concerned with UX + Accessibility.

Forms can be posted without a frontend, therefore backends must implement the needed sanitisation of all submitted input that we intend to trust, unhandled enexpected input leads to server exceptions 🔥.

It is for this reason that server defined form layouts and automatic frontend validation from JSON schema is a really nice way to go.

Thanks for the FE reference I'm sure it will help many people.