JSFiddle - React, Tailwind, and code Playground

by rjurd

HTML

<script src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<form action="/echo/html" class="thumb_forms" name="1" id="frmThumbnails_1" method="post" enctype="multipart/form-data" onsubmit="return false">
    <input type="hidden" name="thumbnailid" id="thumbnailid" value="1">
    <label for="thumbnailname1">Name:</label>
    <input type="text" name="thumbnailname" id="thumbnailname1" value="" class="thumbnailinput required requ_">
    <label for="thumbnaildescription1">Description:</label>
    <textarea name="thumbnaildescription" id="thumbnaildescription1" rows="4" class="thumbnailtexta"></textarea>
    <label for="price1">Price:</label>
    <input type="text" name="price" id="price1" value="" class="thumbnailinput1">
    <label for="contactname1">Contact:</label>
    <input type="text" name="contactname" id="contactname1" value="" class="thumbnailinput1">
    <label for="contactnumber1">Phone:</label>
    <input type="text" name="contactnumber" id="contactnumber1" value="" class="thumbnailinput1">
    <label for="contactemail1">Email:</label>
    <input type="text" name="contactemail" id="contactemail1" value="" class="thumbnailinput1">
    <label for="thumbnailimage1">Image:</label>
    <input type="file" name="thumbnailimage" id="thumbnailimage1" value="" class="thumbnailinput1 cursor">
    <input type="submit" name="Submit" id="1" value="Update Thumbnail 1" class="thumbnailbtn" />
</form>
<span></span>

<form action="" class="thumb_forms" name="5" id="frmThumbnails_5" method="post" enctype="multipart/form-data" onsubmit="return false;">
    <input type="hidden" name="thumbnailid" id="thumbnailid" value="5">
    <label for="thumbnailname5">Name:</label>
    <input type="text" name="thumbnailname" id="thumbnailname5" value="" class="thumbnailinput required requ_">
    <label for="thumbnaildescription5">Description:</label>
    <textarea name="thumbnaildescription" id="thumbnaildescription5" rows="4"...

JavaScript

$(document).ready(function() {
    $(".thumb_forms").each(function(index, elem) {
        $(elem).validate({
            rules: {
                thumbnailname: "required"
            },
            messages: {
                thumbnailname: "Please enter a name for this thumbnail"
            },
            // the errorPlacement has to take the table layout into account
            errorPlacement: function(error, element) {
                //alert(element);
                error.appendTo(element.parent().next("span"));
            },
            // set this class to error-labels to indicate valid fields
            success: function(label) {
                // set &nbsp; as text for IE
                label.html("&nbsp;").addClass("checked");
            },
            submitHandler: function(form) {
                $.post('/echo/html', $(form).serialize(), function(data) {});
            }
        });
    });
});