JSFiddle - React, Tailwind, and code Playground

http://code.jquery.com/jquery-1.11.1.min.js

by vandanasrivastava

HTML

<div class="col-lg-7 col-md-7 col-sm-12 col-xs-12 babyArticleTitle">
										<h2>Tell us about your family</h2>
										<div class="col-lg-11 col-md-11 col-sm-12 col-xs-12">
											<form action="#" id="aboutFamily" class="clearfix">
												<div class="form-group clearfix topCats">
													<input type="radio" id="currentPregnant" class="radio-hide" name="currentPregnant">
													<label class="radio-box current" for="parent"><span>Currently pregnant</span></label>
												</div>
												<div class="topCatsContainer"> 
													<div class="form-group clearfix">
														<label>Estimated date of delivery</label>							
														<input type="text" value=" " name="estimatedDeliveryDate" class="text" id="datepicker">
														<label for="datepicker" class="btnDate"></label>
													</div>
													<div class="form-group clearfix">
														<label>Is it a boy or a girl?</label>							
														<div class="gender">
															<select id="basic3">
																<option value="Don’t know yet">Don’t know yet</option>
																<option value="Boy">Boy</option>
																<option value="Girl">Girl</option>
															</select>
														</div>
													</div>
												</div>
												
												<button class="btn">Join Babyclub</button>
											</form>
										</div>
									</div>

JavaScript

$(document).ready(function() {
  $( "#datepicker" ).datepicker();
  $("#aboutFamily").validate({		
			  rules: {
				  estimatedDeliveryDate: {required: true,   date: true},
				},
			  onfocusout: function(element) { $(element).valid(); },
				messages: {
					estimatedDeliveryDate: "Please select date of delivery",
			  },
		});
  
});