JSFiddle - React, Tailwind, and code Playground

HTML

<input id="tb" type="text" value="Hello" />
<div class="debug-info" style="font-size: 0.7em;"></div>

JavaScript

$("#tb").blur(function ()
{
    var result = validate($("#tb").val(), _validation);
    alert(result.message);
});

var _validation = [
    {
        type: 'regex',
        rule: /^.+$/g,
        message: 'Mandatory fail',
        cssClass: ''
    },
    {
        type: 'regex',
        rule: /^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/g,
        message: 'Email fail',
        cssClass: ''
    }
];

function validate (value, validation)
{
    var returnValue = {
                isValid: true,
                message: "",
                cssClass: ""
            };

    $(".debug-info").append('<span>Val: ' + value + ' | Start: ' + returnValue.isValid + '</span><br />');

    for (var i = 0; i < validation.length; i++)
    {
        $(".debug-info").append('<span>Rule: ' + validation[i].rule + '</span><br />');
        switch (validation[i].type)
        {
            case "regex":
                $(".debug-info").append('<span>Result: ' + validation[i].rule.test(value) + '</span><br />');
                if (!validation[i].rule.test(value))
                    returnValue.isValid = false;
                break;
        }

        if (!returnValue.isValid)
        {
            returnValue.message = validation[i].message;
            returnValue.cssClass = validation[i].cssClass;
            break;
        }
    }

    $(".debug-info").append('<span>Val: ' + value + ' | Ret: ' + returnValue.isValid + '</span><br /><br />');

    return returnValue;
}