JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<script src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<form name="siteauth" id="siteauth" action="savedata" type="POST">
    <div class="message"></div>
    <fieldset>
        <label>Short Description:</label>
        <br><input id="shortdescription" size="75" type="text" maxlength="50"  name="shortdescription"/>
        <br><label>Source URL:</label>
        <br><input id ="sourceurl" size="75" type="text" maxlength="500"  name="sourceurl"/>
        <br><label>Callback URL:</label>
        <br><input id="callbackurl"  size="75" type="text" maxlength="500" name="callbackurl"/>
        <br><label>Callback Content:</label>
        <br><input id="in4"  size="75" type="text" maxlength="100" name="callbackcontent"/>
        <br>
        <br><input type="submit" value="Add"/>
    </fieldset>
</form>

JavaScript

$(document).ready(function(){
    $("#siteauth").validate({
        rules: {
            shortdescription: "required",
            sourceurl: "required"
        },
        messages: {
            shortdescription: "Enter a short description. ",
            sourceurl: "Enter a Source URL. "
        },
        errorElement: "div",
        wrapper: "div",
        errorPlacement: function (error, element){
            error.appendTo($(".message"));
        }
    });
});