Intuitive frontend form validation, using the HTML5 standard attributes + custom attributes for extended validation options.
$ npm install --save valy
const Valy = require('valy');
new Valy(document.querySelector('#myForm'));
First include the library in your html:
<script type="text/javascript" src="valy.min.js"></script>
new Valy(document.querySelector('#myForm'));
In the HTML:
<form action="?" method="post" id="myForm">
...
</form>
To define validation rules, you can use either the HTML5 standard attributes (required
, pattern
or type="email"
), or custom validation rules attribute: data-valy-rules
.
For the custom validation rules attribute, you must use the specified syntaxis:
data-valy-rules="rule1(option1, option2); rule2(option1, option2);"
You can have as many rules as you need, you can also have duplicated rules, with different options (very useful for the pattern rule).
<input type="text" required>
<input type="text" data-valy-rules="required">
Makes the field required.
<input type="text" pattern="^[a-Z]$">
<input type="text" data-valy-rules="pattern(/^[a-z]$/i)">
Validates the field value against the provided regular expression.
- {String} (mandatory): Regular expression like string:
/^[a-z]$/i
<input type="email">
<input type="text" data-valy-rules="email">
Validates the field value against predefined email regular expression.
<input type="text" data-valy-rules="presence(6, 10)">
Makes the field required.
- {Number} (optional) - The minimum value length
- {Number} (optional) - The maximum value length
<input type="text" required>
Makes the field required.
<input type="text" required>
Makes the field required.
<input type="text" required>
Makes the field required.
MIT © Nikola Boychev