JSFiddle - React, Tailwind, and code Playground

by makque

HTML

<form id="myForm">
    <label>Type anything but "fun":
        <input id="noFun" type="text" oninput="checkValid(this)"
        required/>
        <input type="submit" />
    </label>
</form>
<br/>
<div id="err"></div>
<script>
    function checkValid(input) {
        if (input.value == "fun") {
            input.setCustomValidity("You're having too much fun!");
        } else {
            // input is fine -- reset the error message
            input.setCustomValidity('');
        }
        previewMessage();
    }

    function previewMessage() {
        var myform = document.getElementById("noFun")
        document.getElementById("err").innerHTML = myform.validationMessage;
    }
</script>

JavaScript

//SOURCE: http://msdn.microsoft.com/en-us/library/windows/apps/hh441292.aspx

$(document).ready(function () {
    previewMessage();
});