JSFiddle - React, Tailwind, and code Playground

by trixta

HTML

<script src="http://afarkas.github.io/webshim/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="http://afarkas.github.io/webshim/js-webshim/minified/polyfiller.js"></script>
<form type="POST">
    <input required="required" type="file" accept="image/*" />
    <button type="submit">Submit</button>
    <button type="button" class="validate">Validate</button>
</form>

JavaScript

webshims.setOptions('extendNative', true);

webshims.polyfill('forms');

//setCustomValidity is stupid so we improve by adding setCustomValidityRule
$.fn.setCustomValidityRule = function (type, rule) {
    var testRule = function () {
        //only if it's valid or we have set the message our own
        if ($(this).is(':valid') || $.data(this, 'customErrorType' + type)) {
            var message = rule(this);
            this.setCustomValidity(message);
            if (message) {
                $.data(this, 'customErrorType' + type, message)
            } else {
                $.removeData(this, 'customErrorType' + type);
            }
        }
    };
    return this
    //invoke initially
    .each(testRule)
    //and on every change
    .on('customchange.customerror' + type + ' change.customerror' + type, testRule);
};

$.fn.removeCustomValidityRule = function (type) {
    return this.removeData('customErrorType' + type).off('.customerror' + type);
};

$.fn.reportValidity = function () {
    return this.each(function () {
        var form;
        if (this.reportValidity) {
            this.reportValidity();
        } else {
            form = $($.prop(this, 'form')).add(this).filter('form');
            //checkvalidity is obtrusive sometimes so we use :invalid
            if($(':invalid', form).length){
            $('<input type="submit" />')
                .css({
                position: 'absolute',
                left: '-99999px'
            })
                .appendTo(form)
                .click()
                .remove();
            }
        }
    });
};

function validateFileInputType(input) {
    var accept = $.prop(input, 'accept');
    var message = '';
    if (input.type === 'file' && accept && input.files && input.files.length) {
        var MIMEtype = new RegExp(accept.replace('*', '.\*'));
        var allValid = Array.prototype.every.call(input.files, function passesAcceptedFormat(file) {
            return MIMEtype.test(file.type);
 ...