JSFiddle - React, Tailwind, and code Playground

by morrison

HTML

<form id='form'>
    <input type='email' name='email' />
    <input type='tel' name='phone' />
    <button type='submit'>Submit</button>
</form>

JavaScript

(function() {
    validate = {
        regex: function(node, expression) {
            var regexp = new RegExp("^" + expression + "$");
            return regexp.test(node.value);
        },
        zip: function(node) {
            return (/^\d{5}(?:-\d{4})?$/).test(node.value);
        },
        phone: function(node) {
            return (/^(?:\d{10}|(?:\(\d{3}\) ?|\d{3}-)\d{3}-\d{4})$/).test(node.value);
        },
        numeric: function(node) {
            return (/^[+\-]?(?:\d+|\d*\.\d+)$/).test(node.value);
        },
        alphaNumeric: function(node) {
            return (/^[a-zA-Z0-9]+$/).test(node.value);
        },
        alpha: function(node) {
            return (/^[a-zA-Z]+$/).test(node.value);
        },
        email: function(node) {
            return (/^[^@]+@[^@]+$/).test(node.value);
        },
        all: function(object) {
            var success = {},
                length = object.length,
                i;
            for (i = 0; i < length; i++) {
                var obj = object[i];
                success[obj.node.name] = this[obj.func](obj.node, obj.args);
            }
            return success;
        }
    };
})();


var form = document.getElementById('form');

if (!form.addEventListener) {
    form.addEventListener = function(event, func, addCapture) {
        form.attachEvent("on" + event, func);
    };
}

form.addEventListener('submit', function(event) {
    event.returnValue = false;
    if (event.preventDefault) {
        event.preventDefault();
    }
    event.cancelBubble = true;
    if (event.stopPropagation) {
        event.stopPropagation();
    }

    var results = validate.all([
        {
        node: form.email,
        func: 'email'},
    {
        node: form.phone,
        func: 'phone'}
    ]);

    form.appendChild(document.createTextNode("submit"));
});

document.addEventListener('submit', function(event) {
    console.log(event);
});