JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/additional-methods.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://tympanus.net/Freebies/Boxify/css/bootstrap.min.css">
<form role="form" id="myform">
<div class="form-group">
    <label>what is your number?</label>
    <div class="col-lg-12">
        <div class="col-lg-6">
            <div class="checkbox">
                <label>
                    <input type="checkbox" value="one" name="number[]">one
                        </label>
                    </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" value="two" name="number[]">two
                            </label>
                        </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" value="three" name="number[]">three
                                </label>
                            </div>
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" value="four" name="number[]" >four
                                    </label>
                                </div>
                        </div>
                        <div class="col-lg-6">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" value="five" name="number[]">five
                                        </label>
                                    </div>
                                <div class="checkbox">
                                    <label>
                                        <input type="checkbox" value="six" name="number[]">six
           ...

CSS

.has-error label.error {
    color: #a94442;
}
.has-error .help-block { 
    color: #737373;
}

JavaScript

$.validator.addMethod( "at_least_one", function() {
    return $( "input[name='number[]']:checked" ).length;
}, 'Select at least one number' );

$('#myform').validate({// initialize the plugin
					errorElement: 'div',
					rules: {
                        "number[]": "at_least_one",
						datetimepicker: {
							required: true,
							date: true
						},
						commercialText: {
							required: true,
							minlength: 5
						},
						terms: {
							required: true,
							maxlength: 2
						}
					},
					submitHandler: function (form) { 
						var text = $("#customtext").val();
						var date = $("#datetimepicker").val();
						var stand = 2; 
						$.ajax({
							url: 'savedatanow.php',
							type: "POST",
							data: {
								text: text,
								date: date,
								stand: stand
								
							},
							dataType:'text',
							success: function(response)
							{
								
								alert(response);
							}
						});
						//alert('outside ajax');
					},
					highlight: function (element) {
						$(element).closest('.form-group').removeClass('success').addClass('has-error');
					},
					success: function (element) {
						element.addClass('valid')
							.closest('.form-group').removeClass('error').addClass('has-success');
					}					
				});