JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://f787560ba70f1b179169-a50fb1398a876e5fb3dcb373780ed776.r22.cf2.rackcdn.com/lib/jquery.validate.min.js"></script>
   	<form class="form-horizontal" role="form" name="submitDetails" action="discovery_2014.do" method="POST" id="submitDetails">
        <div class=" column leftside">
          <div class="firstName col-sm-12">
            <div class="col-sm-10 form-group">
              <label for="firstName" class="sr-only">First name</label>
              <input type="text" class="form-control" id="firstName"  placeholder="First name"/>
            </div>
            <div class="col-sm-2 stars"> <span class="glyphicon glyphicon-star"></span>  </div>
          </div>
          <div class="lastName col-sm-12">
            <div class="col-sm-10 form-group">
              <label for="lastName" class="sr-only">Last name</label>
              <input type="text" class="form-control" id="lastName"  placeholder="Last name"/>
            </div>
            <div class="col-sm-2 stars"> <span class="glyphicon glyphicon-star"></span>  </div>
            <!--           <div class="col-sm-2 stars"> <span class="glyphicon glyphicon-star"></span> </div> --> 
          </div>
          <div class="age-state clearfix">
            <div class="age col-sm-6">
              <div class="col-sm-9 form-group">
                <label for="custom1" class="sr-only">Age</label>
                <input type="text" class="form-control" id="custom1"  placeholder="Age"/>
              </div>
              <div class="col-sm-2 stars"> <span class="glyphicon glyphicon-star"></span> </div>
              <!--           <div class="col-sm-2 stars"> <span class="glyphicon glyphicon-star"></span> </div> --> 
            </div>
            <div class="state col-sm-6">
              <div class="col-sm-11 form-group">
                <label class="col-sm-12 control-label sr-only" for="selectbasic state">Location</label>
                <div class="col-sm-12">
                  <select...

JavaScript

$(document).ready(function () {
  <!-- validation -->
  $('#submitDetails').validate({
    // 1. validation rules.
    rules: {
      firstName: {
		   required: true,
		    maxlength: 120
	  },
      lastName:{
		   required: true,
		    maxlength: 120
	  },	  
	  custom1: {
		   required: true,
		    maxlength: 120
	  },
	  state: {
        required: true
      },
      custom9: {
        required: true
      },	  
      email: {
        required: true,
        email: true
      }
    },
    // 2. Validation fail messages
    messages: {
      custom9: {
        required: "You must agree to the terms of conditions in order to participate."
      }
    },
    errorPlacement: function(error, element) {
		if (element.attr("name") == "custom9" )
        	error.appendTo("#error_msg");				
	    else
	        error.insertAfter(element);
    }		
  });
  ///execute when submit button is clicked
  $("#submit").click(function () {

  });
});