JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<form id="first">
    <input type="text" name="name" test/>
    <textarea test></textarea>
    <input type="submit" value="Submit" />
</form>

<form>
    <select test>
        <option value=""></option>
        <option value="hi">Hi</option>
        <option value="hi">Bye</option>
    </select>
    <input type="submit" value="Submit" />
</form>

CSS

form {
    display: block;
    border: 1px solid #ddd;
    margin: 22px;
    padding: 16px;
}
form.incomplete input[test], form.incomplete textarea[test], form.incomplete select[test] {
    border: 1px solid #e33;
}

JavaScript

var i, docForms = document.getElementsByTagName('form');

function getRequiredElements(parentElement) {
    var i, j, attr,
        parent = parentElement || document,
        elements = [],
        required = [],
        validTags = ['input', 'select', 'textarea'];

    for (i = 0; i < validTags.length; i++) {
        elements = parent.getElementsByTagName(validTags[i]); 
        for (j = 0; j < elements.length; j++) {
            attr = elements[j].getAttribute('test');
            if (attr !== null && attr !== undefined) {
                required.push(elements[j]);
            }
        }
    }
    return required;
}

function checkRequiredElements(form) {
    var i, req = getRequiredElements(form);
    
    for (i = 0; i < req.length; i++) {
        if (req[i].value === "") {
            form.className += " incomplete";
            alert("incomplete!");
            return false;
        }
    }
    return true;
}

function makeHandler(index) {
    return function () {
        return checkRequiredElements(docForms[index]);
    };
}

for (i = 0; i < docForms.length; i++) {
    docForms[i].onsubmit = makeHandler(i);
}