Provide a nice and easy way to attach some validation rules to any particular form elements and decide how the reply messages will be displayed.
- A bunch of pre-made validators like (required, min, max, range, maxlength, pattern, number, integer, color, email and url)
- Easy to register new validators
- Easy to translate the validators messages
- Handle checkboxes and radios validations
- Easy to customize how errors are displayed (even by validators types)
- Hook the form
checkValiditymethod to reflect the validations
- And more...
Table of content
- Get Started
- Styling your validators
- Register a new validator
- Sugar Web Components Documentation
- Browsers support
- Who are Coffeekraken?
npm install coffeekraken-s-validator-component --save
Then simply use it inside your html like so:
<!-- grab standard HTML validators from the target -->
s-validatorcomponent will grab the standards HTML validators from the target like
Styling your validators
Styling your validators become very simple. To help you style it depending on his state, some attributes will be present or not on the component itself as well as on the inputs that he handle. Here's the list:
On the component itself
activewhen an error message has to be displayed
On the inputs elements
invalidwhen the input is invalid
validwhen the input is valid
dirtywhen the input has been touched by the user
Here's how to apply a very simple styling to your validators
// styling the validator itselfs-validator// styling the inputsinput
Register a new validator
To register a custom validator, you just need to use the
// import the component// register a new validatorSValidatorComponent
message function takes each at least 1 argument. The
targetFormElms for the
validate one, and the corresponding raw validator
message for the
The other arguments are optional but are passed by following this pattern:
In case of a validator that need two parameters like a
range type of one, it will be used like so:
range parameter will be splited by the
: separator and two additional parameters will be passed to the
message function like so:
By doing this principle, your custom validators can have
n parameters. It's totally up to you.
In order to display the error messages when needed, the component use the concept of
unapply function that revert the
apply function actions.
apply function that is used by the component set the error message inside the component itself, and his
unapply function just clear it with an
innerHTML = ''; statement.
If this behavior suits your need, you can stop here, but you can totally set custom
unapply function to each validators. Here's how to do it:
Override the default
You can as well override the default
apply function like so:
IE / Edge
|IE11+||last 2 versions||last 2 versions||last 2 versions|
As browsers are automatically updated, we will keep as reference the last two versions of each but this component can work on older ones as well.
The webcomponent API (custom elements, shadowDOM, etc...) is not supported in some older browsers like IE10, etc... In order to make them work, you will need to integrate the corresponding polyfill.
This is an open source project and will ever be! You are more that welcomed to contribute to his development and make it more awesome every day. To do so, you have several possibilities:
Who are Coffeekraken
We try to be some cool guys that build some cool tools to make our (and yours hopefully) every day life better.
The code is available under the MIT license. This mean that you can use, modify, or do whatever you want with it. This mean also that it is shipped to you for free, so don't be a hater and if you find some issues, etc... feel free to contribute instead of sharing your frustrations on social networks like an asshole...