Olivier Bossel
January 2018
M T W T F S S
     
1234567
891011121314
15161718192021
22232425262728
293031  

Categories


Olivier Bossel

Declarative way to validate form inputs using custom elements

Olivier BosselOlivier Bossel

Form validation has always be something nice to have on a formular. This bring to the user the indications about what is correctly filled up, what is required and what is wrong when he’s using your website inputs, select, etc…

Unfortunately, this process has always been a pain in the ass to implement in a clean, declarative and elegant way.

The issues

To validate a form, you may use one of these listed solutions

  1. Native browser capabilities
  2. A js library like
    • Parley
    • ValidateJS
    • Etc…
    • They are often complicated to integrate
    • Not so declarative
  3. Custom personal per project js implementations
    • Hard to maintain when working in team
    • No documentation

Custom elements to the rescue

Since quite some times now, the custom elements capabilities are ussable in production. Sometimes natively, sometime with the help of some polyfills.

Using this specification, it become quite easy to create a new HTML tag that will be responsible to validate a form input. We can think of something like this:

<label for="my-cool-input">
    <input type="text" name="my-cool-input" required />
    <my-cool-validator for="my-cool-input"></my-cool-validator>
</label>

on the hypotetical example above that we have now a declarative HTML tag to validate our input. This new tag is connected to our input using the for attribute, pretty much like the <label> tag is.

You may say. “Ok, this is quite cool… but all theorical and I don’t have time to develop my own HTML tag…”

No worries… Keep reading…

Introducing Coffeekraken s-validate webcomponent

The s-validate component does exactly what I’ve describe above and more. Here’s his features:

  1. Declare your validation inside your html where you need them
  2. Connect easily the validation component to any input, select or textarea using the for attribute
  3. Support a bunch of default validations like:
    1. required
    2. min / max
    3. range
    4. maxlength
    5. pattern
    6. number / integer
    7. color
    8. url
    9. email
  4. Easily customize / translate the error messages
  5. Multiple validations by validator (required + email for example)
  6. Easy to register new custom validators if needed
  7. Easy to display where and how to display the error messages as the messages will be populated directly inside the component HTML tag
  8. Hook the form checkValidity method to reflect the validations
  9. Choose when to trigger the validations using the on attribute (default: change). Can be blur, keyup, etc…
    • Support also timeout before validation is triggered

Getting started

First, you will need to install the component using npm/yarn like so:

# using npm
npm install coffeekraken-s-validator-component --save
# using yarn
yarn add coffeekraken-s-validator-component

Then, simply import the component inside your js file like so

import SValidatorComponent from 'coffeekraken-s-validator-component'

And use it inside your HTML like so:

<form name="...">
    <label for="my-cool-input">
        <input type="email" name="my-cool-input" required />
        <s-validator for="my-cool-input"></s-validator>
    </label>
</form>

Style your validators:

/* this can be any style you want... */
s-validator {
    display:none;
    color: red;

    /* the "active" attribute will tells you when an error has to be displayed */
    &[active] {
        display:block;
    }
}

/* style your inputs */
input {
    border:1px solid grey;

    &[dirty][valid] {
        border-color: green;
    }
    &[dirty][invalid] {
        border-color: red;
    }
}

By doing doing the validations this way, you will have full control over how to display them, where to display them and when.

Go further links

Here’s some links to start using this component and do further if needed:

  1. Coffeekraken s-validator github repository and full documentation
  2. Webcomponents polyfills
  3. Custom element specification

Passionate interactive web developer from Switzerland. To be always in research of new technologies, improving workflows and contributing to the open source community are my primary motivations. The web community is moving so fast and being up to date is a daily job. THIS is where my passion for this domain come from. I'm an eternal dissatisfied and this is what makes me push each project at the limit and never give up on challenges. The web is an incredible way to communicate and to make the life simpler/better when it's correctly used and built. Be part of it's construction is a chance.