foobar

<!DOCTYPE html>
<html lang="en">
    <head>
        <style>
            label {
                display: block;
            }

            input {
                display: block;
                margin-bottom: 10px;
                outline: none;
                border: thin solid #ccc;
            }
        </style>
    </head>
    <body>
        <form id="validateForm" novalidate>
            <label for="input-one">First</label>
            <input id="first" type="text" />

            <label for="input-one">Second</label>
            <input id="second" type="text" />

            <label for="input-one">Three</label>
            <input id="three" type="text" />

            <button type="submit">Submit</button>
        </form>

        <script type="text/javascript">
            (function () {
                document.addEventListener('DOMContentLoaded', documentReady);

                function documentReady() {
                    let $form = document.getElementById('validateForm');

                    $form.addEventListener('submit', function (event) {
                        event.preventDefault();
                        let $this = this;

                        let $inputs = Array.from($this.children).filter((node) => {
                            return node.nodeName === "INPUT";
                        });

                        $inputs.forEach((node) => {
                            let value = node.value;

                            if (!value || isNaN(value))
                                node.style.borderColor = 'red';
                            else
                                node.style.borderColor = 'green';
                        });
                    });
                }
            })();
        </script>
    </body>
</html>