How to use XRule?

Include, specify and call.

It's very simple to use XRule. Follow instructions below.

  1. Include xrule.min.js file.
  2. Specify data-xr attribute.
  3. Call function xr().
<script src="xrule.min.js">
<form onsubmit="return xr(this)">
    <input data-xr="req() email()">
    <input data-xr="num()">
    <input type="submit">

Look at the 2nd line of source code above. It shows how to use function xr(). Be aware that you need to put 'return' keyword before xr(this). In this example, XRule will alert popup with message "Required." and prevent submit event. You can see a working demo below.


Look at the 3rd line of source code above. There is an input element which has data-xr attribute string "req() email()". It means this field can't have empty value and the value must be a valid email address string.

Now, let's take a look another example.

<input data-xr="req() between(2,9)">

XRule will check if this field is not empty and the value is between 2 and 9. XRule checks every field which has data-xr attribute. You can add multiple rules to a field via data-xr attribute string. Just put a space between rules.