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://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>
<table>
    <tr>
        <td>
            <form id="addGigForm">

               <table align="left" border="0" cellspacing="0">
                   <tr>
                       <td align="right">Gig Graphic URL:&nbsp;</td>
                       <td align="left">
                          <input 
                             type="text" 
                             name="url" 
                             value="" 
                             id="url" 
                             class="graphicURL" 
                             maxlength="3000" 
                             size="64"  />
                       </td>
                   </tr>
                   <tr>
                       <td> <p><input type="submit" value="Submit" /></p></td>
                   </tr>
              </table>

           </form>
        </td>
    </tr>
</table>
<p style="color: red;"><?php echo $message; ?></p>
<div id="scheduleErrors" class="errorList">
   <ul class="errorList">
   </ul>
</div>

CSS

.error { background-color: #ffc; border: 1px solid #c00;  color: red; }
li label.error { background-color: #fff; border: 0; color: red; }

JavaScript

$.validator.addMethod("graphicURL", function() { return false; });
$(document).ready(function(){

       $("#addGigForm").validate(
            {
                rules: {
                    url: { graphicURL: true }
                },
                  messages:
                  {
                    url: { graphicURL: "Please enter a valid web address and file name in Gig Graphic URL.<br /><i>Note: Valid web addresses start with \'http://\' or \'https://\'<br />Supported graphic file formats are JPEG, GIF and PNG</i>" }
                  },

                  errorContainer:"#scheduleErrors",
                  errorLabelContainer:"#scheduleErrors ul",
                  wrapper:"li"
            }
        );
      });