JSFiddle - React, Tailwind, and code Playground

by Peter Aad

HTML

<script src="http://afarkas.github.com/webshim/demos/js-webshim/minified/extras/modernizr-custom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/webshim/1.15.7/dev/polyfiller.js"></script>
<form>
    <ul class="errorMessages"></ul>
    
    <div>
        <label for="name">Name:</label>
        <input id="name" type="text" required />
    </div>

    <div>        
        <label for="comments">Comments:</label>
        <textarea id="comments" required></textarea>
    </div>
    
    <div class="buttons">
        <input type="submit" value="Submit" />
    </div>
</form>

CSS

body {
    padding-top: 15px;
}
div {
    width: 400px;
}
label {
    display: inline-block;
    width: 100px;
    text-align: right; 
    margin-bottom: 10px;
    margin-right: 3px;
}
input[type=text], textarea {
    width: 200px;
}
label[for=comments] {
    margin-bottom: 0;
}
textarea { 
    height: 30px;
    vertical-align: middle;
}
.buttons {
    padding-top: 10px;
    text-align: center;
}

.errorMessages {
    display: none;
    list-style-type: disc;
    margin: 0 10px 15px 10px;
    padding: 8px 35px 8px 30px;
    color: #B94A48;
    background-color: #F2DEDE;
    border: 2px solid #EED3D7;
    border-radius: 4px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
.errorMessages span {
    font-weight: bold;
}

JavaScript

$.webshims.polyfill('forms');

function createAllErrors(){
    var form = $(this);
    var errorList = $('ul.errorMessages', form);
    var showAllErrorMessages = function() {
        errorList.empty();
        //Find everything within the form
        $('form').find(':invalid').each(function(index, node) {
            var label = $('label[for=' + node.id + ']');
            //Opera incorrectly does not fill the validationMessage property.
            // but it's corrected by webshims, hell yeah
            var message = $.prop(node, 'validationMessage');
            errorList
                .show()
                .append('<li><span>' + label.html() + '</span> ' + message + '</li>');
        });
    };
    
    $('input[type=submit]', form).on('click', showAllErrorMessages);
    $('input[type=text]', form).on('keypress', function(event) {
        //keyCode 13 is Enter
        if (event.keyCode == 13) {
            showAllErrorMessages();
        }
    });
}    

$(function() {
    $('form').each(createAllErrors);
});