JSFiddle - React, Tailwind, and code Playground

by asle

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.0/jquery.validate.min.js"></script>
<p>Default submitHandler is set to display an alert into of submitting the form</p>
<form id="commentForm" method="get" action="">
    <fieldset>
        <legend>Please provide your name, email address (won't be published) and a comment</legend>
        <p>
            <label for="cname">Name</label>
            <input id="cname" name="name" minlength="2" type="text" required />
            <p>
                <label for="cemail">E-Mail</label>
                <input id="cemail" type="email" name="email" required />
            </p>
            <p>
                <label for="curl">URL (optional)</label>
                <input id="curl" type="url" name="url" />
            </p>
            <p>
                <label for="ccomment">Your comment (required)</label>
                <textarea id="ccomment" name="comment" required></textarea>
            </p>
            <p>
                <input class="submit" type="submit" value="Submit" />
            </p>
    </fieldset>
</form>

CSS

* {
    font:13px verdana
}
#commentForm {
    width: 500px;
}
#commentForm label {
    width:200px;
    display:block-inline;
}
#commentForm label.error, #commentForm input.submit {
    margin-left: 8px;
}
.error {
    font-size:10px;
    color:red
}

JavaScript

$().ready(function () {
    // validate the comment form when it is submitted
    $("#commentForm").validate();
})