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 thenValue 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)
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.
Yup. Obviously, both validations are pretty much needed in real time scenarios. Thank you.
“Nothing is obvious in software”, I always like that phrase because we take so much for granted, don’t ask who told me that I can’t remember ☺️
:D
Maybe do a spellcheck before you publish content written by ChatGPT.
Sure. I do. It is not written by chatGPT.