Imagine, we have a React component (input form) and we need to validate the user input using a regex pattern. I did a little survey between my friends and here the result:
- do it in onChange handler - 41%
- delegate this task to back-end developers - 40%
- use “react-validation” package - 19%
- something else - 0
No one suggested "something else", but in fact there is another way. And it is not a mysterious knowledge that available only to the elite. The point is that we often spend a lot of time learning APIs of frameworks, packages and gems and we often don't have time to go deep. But sometimes knowing the basics 💤 can make your life easier, no worse than a good package would do.
The Input Element
This element can be called the main element of any form. It has many attributes, but the main one is the type
attribute, which controls the data type of the element. Do you know how many values can take the type attribute? 22! It seems like dissociative personality disorder.
Let's look at some of them:
- number, url, email - a text control with auto validation
- password - a text control that obscures data entry
- date - easiest way to get a date control
- time - a time input with mask
- range - a slider control
- color - a color picker
- submit - a submit button
- reset - easiest way to reset the form
- file- file upload
Let's create a simple React Input component.
const Input = ({ name, type = “text”, label, placeholder, ...rest }) => (
<label>
{label}
<input name={name} type={type} placeholder={placeholder} {...rest} />
</label>
);
Putting the input
tag into the label
tag is one way to associate them. Another way is to use the for
(or htmlFor
) attribute.
Validation
Let's look at the attributes which help us validate the data in the control.
- max / min
- maxlength / minlength
- required
- pattern
The pattern
attribute specifies a regular expression for validating user input. By the way, if we want to show a custom error message we can do it with the title
attribute.
The max
and min
attributes indicate the allowed range of values for the element. By the way you can put date (or time) value into these attributes for a given range in the date (or time) picker.
The List attribute
The Input element has the list
attribute. Put the id of the datalist element in this attribute and you will get a select control.
const Select = ({ label, options }) => (
<Fragment>
<Input list=”list” />
<datalist id=”list”>
{options.map(item => (
<option key={item.value} value={item.value} label={item.label} />
))}
</datalist>
</Fragment>
);
And in conclusion let's play with another interesting attribute - multiple
. It allows us to transform the Select into a Multiselect Control. Just add it! The great feature but it only works if your input is an email
or file
type. Therefore if you really need such functionality, then... you know... look for framework, package or gem.
Top comments (0)