JSFiddle - React, Tailwind, and code Playground

HTML

<div class="form" data-vd="Activity Form Applet">
    <p>
        <label>Asset #</label>
        <input type="textbox" id="Asset_Number" data-vd="Asset Number" />
    </p><p>
        <label>Type</label>
        <input type="textbox" id="Type" data-vd="Type" />
    </p>
    <p>
        <button class="save">Validate</button>
</div>
<div id="log"></div>

CSS

label {
    cursor: pointer;
    display: block;
    float: left;
    font-size: 13px;
    font-weight: bold;
    line-height: 28px;
    margin-bottom: 5px;
    width: 60px;
}

input[type=text] {
    background: rgba(255, 255, 255, 0.9);
    background: -moz-linear-gradient(90deg, #fff, #eee);
    background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#fff), color-stop(0.2, #fff));
    border: 1px solid #aaa;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-box-shadow: 0 0 3px #aaa;
    -webkit-box-shadow: 0 0 3px #aaa;
    padding: 5px;
}

div.form {
background: #f7f7f7;
background: -moz-linear-gradient(90deg, #ccc, #fff);
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ccc));
border: 1px solid #aaa;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-moz-box-shadow: 0 0 15px #aaa;
-webkit-box-shadow: 0 0 15px #aaa;
margin: 60px auto 0;
padding: 20px;
width: 440px;
}

JavaScript

var validationMetaData = {
    "Activity List View": [{
        "Activity Form Applet": {
            "Asset Number": {
                "type": "text",
                "minlength": 5
            },
            "Type": {
                "type": "text",
                "maxlength": 5
            },
            "Comments": {
                "type": "text",
                "email": "true"
            },
            "Status": {
                "type": "number",
                "maxlength": 9
            },
            "Priority": {
                "type": "text",
                "minlength": 5
            }
        }
    }]
};



var vdl = (function () {
    var validationJson = '';
    var errorMessage = '';

    var isValidLength = function (field, obj) {
        if (typeof obj['minlength'] !== 'undefined') {
            console.log('min: ' + obj['minlength'] + '\tActual: ' + field.value.length);
            if (obj['minlength'] > field.value.length) {
                errorMessage = 'The "' + field.id + '" does not contain enough characters (requires ' + obj['minlength'] + ')';
                console.log(errorMessage);
                return false;
            }
        }

        if (typeof obj['maxlength'] !== 'undefined') {
            if (obj['maxlength'] < field.value.length) {
                errorMessage = 'The "' + field.id + '" contains too many characters';
                return false;
            }
        }

        return true;
    };

    var isValidType = function (field, obj) {
        // regex of for value type
        return true;
    }

    var isFieldValid = function (field, obj) {
        console.log('Field: ' + field + '\nControl: ' + obj);
        var isValid = isValidLength(field, obj);
        console.log('Valid Length: ' + isValid);

        if (isValid) isValid = isValidType(field, obj);

        return isValid;
    };

    var setValidation = function (json) {
        validationJson = json;
    };

    var validateForm = function () {
 ...