JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/andyet/Happy.js/master/happy.js"></script>
<script src="https://raw.github.com/andyet/Happy.js/master/happy.methods.js"></script>
<form id="yourForm">
    <label for="name">Name: <input id="name" type="text"></label><br>
    <label for="email">Email: <input id="email" type="text"></label><br>
    <label for="phone">Phone: <input id="phone" type="text"></label><br>
    <button id="submit">Submit!</button>
</form>

JavaScript

var form = $("#yourForm");

form.isHappy({
    fields: {
        "#name": {
            required: true,
            message: "You need to enter your name. Seriously."
        },
        "#email": {
            required: true,
            message: "You need to enter a <em>proper</em> email. Do you not get how this works?",
            test: happy.email
        },
        "#phone": {
            required: false,
            message: "At least give us a phone number that makes sense.",
            test: happy.USPhone
        }
    },
    submitButton: "#submit"
}).submit(function (event) {
    event.preventDefault();
    alert("Submitting form...");
});

$("button#submit").click(function () {
    // This is a little hack to make sure that the form is valid. There is probably a better way.
    if ($(".unhappyMessage:visible", form).length === 0)
        form.submit();
});