<div class ="container">
    <form role="form" id="arooly_cform">

      <div class="form-group">
        <label for="inputName">Name*</label>
        <div class="input-group Name">
          <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span><input type="text" class="form-control" id="inputName" name="inputName" placeholder="Enter Name">
        </div>
      </div>

      <div class="form-group">
        <label for="inputPhone">Phone Number*</label>
        <div class="input-group phone">
          <span class="input-group-addon"><i class="glyphicon glyphicon-earphone"></i></span><input type="phone" class="form-control" id="inputPhone" name="inputPhone" placeholder="Enter Phone">
        </div>
      </div>

      <div class="form-group">
        <label for="inputEmail">Email address</label>
        <div class="input-group email">
          <span class="input-group-addon"><i class="glyphicon glyphicon-envelope"></i></span><input type="email" class="form-control" id="inputEmail" name="inputEmail" placeholder="Enter email">
        </div>
      </div>

      <div class="form-group">
        <label for="inputDate">Schedule Preview Date</label>
        <div class="input-group date">
          <span class="input-group-addon"><i class="glyphicon glyphicon-calendar"></i></span><input type="date" class="form-control id="inputDate" name="inputDate" placeholder="Enter date">
            </div>
            </div>

            <div class="form-group">
            <label for="inputTime">When you are available</label>                
            <div class="input-group clock">
            <span class="input-group-addon">
            <span class="glyphicon glyphicon-time"></span>
            </span>
            <input type="text" class="form-control" value="Enter Time">
            </div>
            </div>

            <button type="submit" class="btn btn-primary">Submit</button>

            </form>
</div>
jQuery( document ).ready(function() {
 
	$("#arooly_cform").validate({
		rules: {
			inputName: {
				minlength: 3,
				maxlength: 30,
				required: true
			},
			inputPhone: {
				phoneUS: true,
				required: true
			}
		},
		
		highlight: function(element) {
			$(element).closest('.form-group').addClass('has-error');
		},
		
		unhighlight: function(element) {
			$(element).closest('.form-group').removeClass('has-error');
		},
		
		errorElement: 'span',
		errorClass: 'help-block',
		errorPlacement: function(error, element) {
			if(element.parent('.input-group').length) {
				error.insertAfter(element.parent());
			} else {
				error.insertAfter(element);
			}
		}
	});
});

External CSS

  1. //maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js
  3. https://ajax.aspnetcdn.com/ajax/jquery.validate/1.13.1/jquery.validate.js