JSFiddle - React, Tailwind, and code Playground

by mlms13

HTML

<div id="top">
    <div>
        <img />
        <span><a href="#">Hi</a></span>
        <input type="text" required />
        <input type="text" required="true" />
        <input type="text" required="false" />
    </div>
</div>

CSS

.required {
    border: 4px solid red;
}

JavaScript

function Validator() {
    var parent, required = [], self = this;
    this.parentId;

    function initialize() {
        var elements, attr, i;
        
        parent = self.parentId ? document.getElementById(self.parentId) : document;
        elements = parent.getElementsByTagName('*');

        for (i = 0; i < elements.length; i++) {
            attr = elements[i].getAttribute('required');
            if (attr !== undefined && attr !== null && attr !== 'false') {
                required.push(elements[i]);
                elements[i].className += ' required';
            }
        }
    }

    
    // detect support for html5 'required'
    // if the browser does not support 'required', initialize our plugin
    initialize();

    // run (should happen on form submit)
    this.run = function() {
        alert(required.length);
    }
}

var validator = new Validator();
validator.run();