JSFiddle - React, Tailwind, and code Playground

by mishragaurav31

HTML

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<form class="webform-client-form webform-client-form-70 book-visit-form" action="/beta/book-site-visit" method="post" id="webform-client-form-70" accept-charset="UTF-8">

<select required="required" class="slct-style1 form-control form-select required" id="edit-submitted-location--2" name="submitted[location]"><option value="" selected="selected">- Select -</option><option value="Bangalore">Bangalore</option><option value="Chennai">Chennai</option><option value="Coimbatore">Coimbatore</option><option value="Vizag">Vizag</option><option value="Kolkata">Kolkata</option></select>

<input required="required" placeholder="Property Name" class="form-control required" type="text" id="edit-submitted-property-name" name="submitted[property_name]" value="" size="60" maxlength="128" autocomplete="off">

<input required="required" placeholder="Provide your name here" class="charonly form-control required" type="text" id="edit-submitted-name--2" name="submitted[name]" value="" size="60" maxlength="80" autocomplete="off">

<input required="required" placeholder="Mobile No" class="allownumberonly form-control required" type="text" id="edit-submitted-contact-number--2" name="submitted[contact_number]" value="" size="60" maxlength="10" autocomplete="off">

<input required="required" class="span2 form-control required" type="text" id="edit-submitted-date" name="submitted[date]" value="" size="60" maxlength="128" autocomplete="off">

<select required="required" class="form-control form-select required" id="edit-submitted-time" name="submitted[time]"><option value="" selected="selected">- Select -</option><option value="10pm-12pm">10pm-12pm</option></select>


<button type="submit" class="btn-style3">submit</button>

</form>

JavaScript

$("#webform-client-form-70").submit(function (event) {
			var pname = jQuery("#webform-client-form-70").find('input[name="submitted[property_name]"]');
			var name = jQuery("#webform-client-form-70").find('input[name="submitted[name]"]');
			var number = jQuery("#webform-client-form-70").find('input[name="submitted[contact_number]"]');
			var sridate = jQuery("#webform-client-form-70").find('input[name="submitted[date]"]');
			
			var check = validateDate(sridate.val());
			
            if(!validatelength(pname.val(),3,80)){
				pname.select();
				showinfocus(pname);
				event.preventDefault();
				return false;
			}if(!validatelength(name.val(),3,80)){
				name.select();
				showinfocus(name);
				event.preventDefault();return false;
			}else if(!validatelength(number.val(),10,10)){
				number.select();
				showinfocus(number);
				event.preventDefault();return false;
			}else if(!validatemobilenum(number.val())){
				number.select();
				showinfocus(number);
				event.preventDefault();return false;
			}else if(!check){
				sridate.select();
				showinfocus(sridate);
				event.preventDefault();return false;
			}
        });