JSFiddle - React, Tailwind, and code Playground

by bschafer

HTML

<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
   <legend>A simple comment form with submit validation and default messages</legend>
   <p>
     <label for="cname">Name</label>
     <input id="cname" name="name" size="25" class="required" minlength="5" />
   </p>
   <p>
     <label for="cemail">E-Mail</label>
     <input id="cemail" name="email" size="25"  class="required email" />
   </p>
   <p>
     <label for="curl">URL</label>
     <input id="curl" name="url" size="25"  class="url" value="" />
   </p>
   <p>
     <label for="ccomment">Your comment</label>
     <textarea id="ccomment" name="comment" cols="22"  class="required"></textarea>
   </p>
   <p>
     <input class="submit" type="submit" value="Submit"/>
   </p>
 </fieldset>
 </form>

CSS

* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }

JavaScript

// This is a quick example of validation using the jquery.validate.js plugin 
// http://docs.jquery.com/Plugins/Validation

$(document).ready(function(){
    $("#commentForm").validate();
  });