Tips For Validating HTML Form Inputs > QNA

본문 바로가기
Search all within the site

QNA

Tips For Validating HTML Form Inputs

페이지 정보

작성자 최고관리자 댓글 0건 조회 26회 작성일 19-08-18 16:05

본문

Form Validation is something we all have to do on daily basis on the frontend because we want to ensure the validity of the data sent to the backend.

I will explain some simple ways to validate data using html.

INPUT ATTRIBUTES
HTML provides some attributes that can aid in validating data. Let's take a look at a few of them.

1. Pattern: This specifies a regular expression that the value of an input should be validated against when a form is submitted. This can be used with a number of input types including text, date, tel, email, password, etc.

2. Title: This is not used in validating data but to provide more information on what format the data should be provided.

3. Required: This ensures that an input field is not empty when a form is submitted.

4. Minlength: This simply sets the minimum length of a data that is provided in an input field. See an example below.
  <input type="text" minlength="4" required>
These attributes can be combined with a number of input types to ensure the right data is provided.

INPUT TYPES
Using the right input type can help validate against incorrect data type. Below are input types you may need for validating your form.

1. Email: Using email input type for collecting a users email will validate the data to ensure it is in the right format when the form is submitted.

2. Password: This doesn't only validate the password field but it also masks the characters that are typed in. The strength of the password can be specified by passing a regex to the pattern attribute of the input field.
  <input type="password" pattern="(?=.*[a-z]).{6}" title="Must be 6 characters or more and
contain at least 1 lower case letter">
Above is a simple example of a password input field being validated against a regex provided in the pattern attribute. The title attribute carries the text to be displayed when the provided password fails the regex validation.

3. Tel: This basically defines a field for entering a telephone number. It is mainly used for optimising the keyboard on mobile devices. Combining this with the pattern attribute can help validate the data in the tel input field. Take a look at the example below
  <input type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}" title="Phone Number format is +99(99)9999-9999">
4. Number: This defines an input field that accepts only numerical values. It allows for restrictions to be set on what range of numbers are accepted.
  <input type="number" min="2" max="8">
The above example shows a number input field that only accepts numbers between 2 and 8.

Below is a snippet of some of the things mentioned above being put into good use.
  <form id="form" autocomplete>
    <input type="text" minlength="4" required>
    <input type="email" required>
    <input type="tel" pattern="[\+]\d{2}[\(]\d{2}[\)]\d{4}[\-]\d{4}"
    title="Phone Number format is +99(99)9999-9999" required>
    <input type="password" pattern="(?=.*[a-z]).{6}"
    title="Must be 6 characters or more and
    contain at least 1 lower case letter" required>
  </form>
HTML has become more powerful in recent years, and it is interesting the things that can be done with it. I will be writing about it a lot. If you liked this, then please ❤️ and follow me here and on Twitter.

댓글목록

등록된 댓글이 없습니다.


그누보드5
Copyright © UX Site. All rights reserved.