JSFiddle - React, Tailwind, and code Playground

by gabrieleromanato

HTML

<form id="test">
    <input type="file" name="file" id="file" />
    <input type="submit" value="Upload" />
</form>

CSS

.error {
    color: red;
}

JavaScript

var Validator = {

    elements: {
        file: $('#file').val()
    },

    validate: {
        file: function() {
            if (Validator.elements.file == '' || !/\.txt$/.test(Validator.elements.file)) {
                Validator.errorMsg('File not allowed.', '#file');

                return false;
            }

            return true;
        }
    },

    errorMsg: function(msg, element) {
        $('<span class="error"/>').
        text(msg).
        insertAfter(element);
    },

    init: function() {

        $('#test').submit(function(e) {

            if ($('.error').length) {
                $('.error').remove();
            }

            var valid = Validator.validate.file();

            if (!valid) {

                e.preventDefault();

            }



        });
    }
};

Validator.init();