JSFiddle - React, Tailwind, and code Playground

by hr1383

HTML

<script src="http://jquery.bassistance.de/validate/lib/jquery-1.7.2.js"></script>
<script src="http://jquery.bassistance.de/validate/jquery.validate.js"></script>
<form accept-charset="UTF-8" action="/locations/search" data-remote="true" id="company_form" method="post" name="company_form"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="&#x2713;" /><input name="authenticity_token" type="hidden" value="D1rNN2Yh8MX4O43OiSQrTMBvdr3VoQp4bUvUEyEImlo=" /></div>
<table>
  <tr>
  <th>Company</th>
  <th>City</th>
  <th>Country</th>
  <th>ZipCode</th>
  </tr>
  <tr>
    <td><input id="company" name="company" type="text" /></td>
    <td><input id="city" name="city" type="text" /></td>
    <td><input id="country" name="country" type="text" /></td>
    <td><textarea cols="40" id="post_description" name="post_description" rows="20"></textarea></td>
     <td><input name="commit" type="submit" value="search" /></td>
  </tr>
</table>
</form>

 <form  id="new_post" method="post">
  <div class="field">
    <b>  <label for="post_description">Description</label><br /></b>
    <textarea cols="40" id="post_description" name="post[description]" rows="20"></textarea>
  </div>
        
         <input name="commit" type="submit" value="Create Post" />
    </form>

CSS

#company_form { width: 500px; }
#company_form label { width: 250px; }
#company_form label.error, #commentForm input.submit { margin-left: 253px; }
#signupForm { width: 670px; }
#signupForm label.error {
    margin-left: 10px;
    width: auto;
    display: inline;
}
#newsletter_topics label.error {
    display: none;
    margin-left: 103px;
}

JavaScript

$(document).ready(function() {
    // validate the comment form when it is submitted

    // validate signup form on keyup and submit
    $("#company_form").validate({
    rules: {
        "company": {required:true},
        "post_description":{required:true}
    },
    messages:{
            company: "Enter Company name",
         post_description: "Description is required field<br/>"
    }
  });
          $("#new_post").validate({
        rules: {
            post[description]: "required"
                       
        },
        messages: {
            post[description]: "Description is required field<br/>"
                }
                  

    });
 });