XRule

Change Notification UI

Design your own notification.

XRule's default notification UI is alert() but it is not convenient because user have to fix violation one by one. So if you want to show all violation message at once and change notification UI then just put a call-back funciton as xr's second argument. Following example shows how to do it.

Look at 2nd line. call-back function's argument is declaired as 'list' in this example. It contains all information about what XRule did. It is an instance of javascript array. Each element is an instance of XRow. It has 5 properties. Those are 'label', 'el', 'rule', 'value' and 'message'. 'el' is an INPUT HTML DOM element and 'label' is a LABEL HTML DOM element's text(string) which is bound to this 'el'. 'rule' is parsed data-xr attribute of 'el' by XRule. 'value' is a string value of 'el'. 'message' is a violation message text(string) of 'el'. if 'message' is empty then that 'el' has no violation.

<script>
function notify(list) {
    for (var i = 0; i < list.length; i++) {
        var xrow = list[i];
        var span = xrow.el.nextSibling;
        if ("SPAN" !== span.tagName.toUpperCase()) {
            var o = document.createElement("span");
            xrow.el.parentNode.insertBefore(o, span);
            span = o;
        }
        span.innerText = xrow.message;
    }
}
</script>
<form onsubmit="return xr(this, notify)">
    <input data-xr="req()">
    <input data-xr="num()">
    <input data-xr="gt(20)">
    <input type="submit">
</form>

Let's test how it works. Click submit button below.

Demo