Develop Reference

Why the form is not setting after using parsley().reset(); and still showing validators

I am Using ParsleyJs to validate below shown form, I have been trying to reset the form by calling Reset() function on click of Reset button and i have validated the form using isValid() on form submission and not from the data-parsley-validate in form. After using (#formid).parsley().reset(); in Reset() function the form resets all it's fields but still shows the validator saying "this field is required", i have not found any soution in ParsleyJs documentation.
<form id="Person" class="form-horizontal form-label-left">
<div>
<input id="id" type="hidden" name="id">
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="firstname">
First Name
</label>
<div class="col-md-6 col-sm-6 ">
<input type="text" id="firstname" data-parsley-pattern="[a-zA-Z]{3,30}" name="name" class="form-control" data-parsley-trigger="focusout" required>
</div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="lastname">
Last Name
</label>
<div class="col-md-6 col-sm-6">
<input type="text" id="lastname" data-parsley-pattern="[a-zA-Z]{3,30}" name="name" required data-parsley-trigger="focusout" class="form-control" />
</div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="phone">
Phone
</label>
<div class="col-md-6 col-sm-6">
<input class="form-control" type="tel" id="phone" name="phone" required="required" data-parsley-pattern="^\d{10}$" data-parsley-maxlength="10" data-parsley-trigger="focusout" />
</div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="taddress">
Address
</label>
<div class="col-md-6 col-sm-6 ">
<textarea class="form-control" id="address" name="address" rows="3" data-parsley-trigger="focusout" required></textarea>
</div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="dob">
Date of Birth
</label>
<div class="col-md-6 col-sm-6">
<input class="form-control" id="dob" type="date" name="date" data-parsley-trigger="focusout" min="1900-01-01" max="2020-01-30" pattern="\d{4}-\d{2}-\d{2}" required />
</div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align">
Email
</label>
<div class="col-md-6 col-sm-6">
<input class="form-control" id="email" name="email" required type="email" data-parsley-trigger="focusout" />
</div>
</div>
<div class="field item form-group">
<label class="col-form-label col-md-3 col-sm-3 label-align" for="ssn">
SSN
</label>
<div class="col-md-6 col-sm-6">
<input class="form-control" pattern="^\d{9}$" id="ssn" type="number" name="ssn" required data-parsley-maxlength="9" data-parsley-trigger="focusout" />
</div>
</div>
<div class="">
<div class="modal-footer">
<button type="button" class="btn btn-secondary" onclick="Reset()" data-dismiss="modal">Close</button>
<br />
<button class="btn btn-primary" id="btnReset" onclick="Reset()">Reset</button>
<br />
<button type="submit" id="btnSubmit" value="validate" class="btn btn-success">Submit</button>
</div>
</div>
</form>
Below shown is the Reset function
function Reset() {
$("#Person")[0].reset();
$('#Person').parsley().reset();
}

Your button is a submit button! So it validates again your form after the reset...
To make it not a submit button use <button type="button" ...>.
Alternatively you could return false in your onclick, or change it to a <div>, or put it outside the form.

Change the Bootstrap Form with Bootstrap Dropdown and Jquery

I want to change which form to show using dropdown and jquery but doesn't seem to work. I did try a simple code using just a couple of divs and a paragraph and it worked or so I thought, because it's no longer work when I put my forms into it.
By the way, here's my code:
//this is the form
<div class="container">
<h3>Choose the brand you want to input</h3> <br>
<select id="brand-combox" class="custom-select col-sm-2" name="brand-combox">
<option selected value="#">Select a Brand</option>
<option value="qnap">Qnap</option>
<option value="asustor">Asustor</option>
<option value="nutanix">Nutanix</option>
<option value="dji">DJI</option>
<option value="wps">WPS Office</option>
</select>
</div>
<br>
<div class="container container-input" id="qnap-form" style="display: none;">
<form>
<div class="row">
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
<div class="container container-input" id="asustor-form" style="display: none;">
<form>
<div class="row">
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
Here is the jquery:
$('#brand-combox').on('change', function(){
if (this.value == 'qnap') {
$('#qnap-form').show();
$('#asustor-form').hide();
}
else if(this.value == 'asustor'{
$('#qnap-form').hide();
$('#asustor-form').show();
}
});
I also tried any different ways but I can't yet find out what I'm missing.
Would you be so kind to help me?

Your else if condition is not close with ) and add jquery, check it
$('#brand-combox').on('change', function(){
if (this.value == 'qnap') {
$('#qnap-form').show();
$('#asustor-form').hide();
}
else if(this.value == 'asustor'){
$('#qnap-form').hide();
$('#asustor-form').show();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="container">
<h3>Choose the brand you want to input</h3> <br>
<select id="brand-combox" class="custom-select col-sm-2" name="brand-combox">
<option selected value="#">Select a Brand</option>
<option value="qnap">Qnap</option>
<option value="asustor">Asustor</option>
<option value="nutanix">Nutanix</option>
<option value="dji">DJI</option>
<option value="wps">WPS Office</option>
</select>
</div>
<br>
<div class="container container-input" id="qnap-form" style="display: none;">
<form>
<div class="row">
<h2>qnap</h2>
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>
<div class="container container-input" id="asustor-form" style="display: none;">
<form>
<div class="row">
<h2>asustor</h2>
<div class="form-group col-md-6">
<input type="text" name="product_name" class="form-control" placeholder="Product Name">
</div>
<div class="form-group col-md-2">
<input type="text" name="cpu" class="form-control" placeholder="CPU Type">
</div>
<div class="form-group col-md-3">
<input type="text" name="memory" class="form-control" placeholder="Product Memory">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="chassis" class="form-control" placeholder="Chassis Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_bay" class="form-control" placeholder="HDD Bays">
</div>
<div class="form-group col-md-2">
<input type="text" name="hdd_type" class="form-control" placeholder="HDD Type">
</div>
<div class="form-group col-md-2">
<input type="text" name="max_hdd_capacity" class="form-control" placeholder="Max HDD Capacity">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_30" class="form-control" placeholder="USB 3.0">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="usb_20" class="form-control" placeholder="USB 2.0">
</div>
<div class="form-group col-md-3">
<input type="text" name="psu" class="form-control" placeholder="Power Supply">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_dimensions" class="form-control" placeholder="Color Box Dimensions">
</div>
<div class="form-group col-md-3">
<input type="text" name="color_box_shipping_weight" class="form-control" placeholder="Color Box Shipping Weight">
</div>
</div>
<div class="row">
<div class="form-group col-md-3">
<input type="text" name="max_total_frames_per_second" class="form-control" placeholder="Max Total Frames per Second">
</div>
<div class="form-group col-md-2">
<input type="text" name="lan" class="form-control" placeholder="LAN">
</div>
<div class="form-group col-md-3">
<input type="text" name="thunderbolt_port" class="form-control" placeholder="Thunderbolt Port">
</div>
<div class="form-group col-md-2">
<input type="text" name="usb_31" class="form-control" placeholder="USB 3.1">
</div>
</div>
<div class="row">
<div class="form-group col-md-2">
<input type="text" name="base_free_ip_cam" class="form-control" placeholder="Base Free IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_supported_ip_cam" class="form-control" placeholder="Max Supported IP Cam">
</div>
<div class="form-group col-md-3">
<input type="text" name="max_recording_throughput" class="form-control" placeholder="Max Recording Throughput">
</div>
<div class="form-group col-md-3">
<?php
//read product segment
$stmt = $segment->read();
//put them in select dropdown
echo "<select class='custom-select col-sm-12' name='segment_id'>";
echo "<option selected>Select Segment...</option>";
while($row_segment = $stmt->fetch(PDO::FETCH_ASSOC)){
extract($row_segment);
echo "<option value={$segment_id}>{$segment}</option>";
}
echo "</select>";
?>
</div>
</div>
<div class="row">
<div class="form-group col-md-8">
<textarea name="descriptions" class="form-control" placeholder="Enter product descriptions"></textarea>
</div>
<div class="form-group col-md-3">
<label for="photo">Choose Image</label>
<input type="file" name="image" class="form-control-file">
</div>
</div>
<br>
<div class="row">
<div class="form-group col-md-3">
<button type="submit" class="btn btn-success">Create</button>
</div>
</div>
</form>
</div>

Validation error An invalid form control with name='' is not focusable

I had a html form with set of input fields for each of which I am giving required="true" for validation. But when I click on submit after entering the mandatory fields it is give an error:
An invalid form control with name='' is not focusable
I know if we use novalidate to the form I wont get that error, but my validation wont work. How can I make my validation work without error?
<form name="customerForm" class="form-horizontal" id="custForm">
<fieldset>
<div class="form-group">
<label for="customerName" class="col-lg-4 col-lg-offset-1 control-label">Name</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.customerName" placeholder="Enter customer name" type="text" required="true" value = "{{customerName}}">
</div>
</div>
<div class="form-group">
<label for="postCode" class="col-lg-4 col-lg-offset-1 control-label">Post code</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.postcode" placeholder="Enter post code" type="text" value = "{{postCode}}">
</div>
<div class="col-lg-2">
<button type="next" class="btn btn-primary" ng-click="$ctrl.findAddress()">Find address</button>
</div>
</div>
<div class="form-group">
<label for="selectAddress" class="col-lg-4 col-lg-offset-1 control-label">Select address</label>
<div class="col-lg-4">
<select class="form-control" id="selectAddress" ng-model="$ctrl.quote.newClient.customerAddress" ng-change="$ctrl.populateAddressFields()">
<option ng-repeat="address in addresses"
value="{{address}}" >{{address}}</option>
</select>
</div>
</div>
<div class="form-group ng-hide">
<label for="textArea" class="col-lg-4 col-lg-offset-1 control-label">Address</label>
<div class="col-lg-4">
<textarea ng-model="$ctrl.quote.newClient.customerAddress" class="form-control" rows="3" required="true"></textarea>
</div>
</div>
<div class="form-group">
<label for="address1" class="col-lg-4 col-lg-offset-1 control-label">Address 1</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.addressLine1" placeholder="Enter Address 1" type="text" required="true" value = "{{addressLine1}}">
</div>
</div>
<div class="form-group">
<label for="address2" class="col-lg-4 col-lg-offset-1 control-label">Address 2</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.address.addressLine2" placeholder="Enter Address 2" type="text" required="true" value = "{{addressLine2}}">
</div>
</div>
</div>
<div class="form-group">
<label for="inputEmail" class="col-lg-4 col-lg-offset-1 control-label">Email address</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.eMail" placeholder="Enter customer email" type="email" required="true" value = "{{emailId}}">
</div>
</div>
<div class="form-group">
<label for="customerMobile" class="col-lg-4 col-lg-offset-1 control-label">Mobile number</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.customerMobile" placeholder="Enter customer mobile number" type="text" required="true">
</div>
</div>
<div class="form-group" ng-show="$root.customerDetails.tradeType.description == 'Limited Company'">
<label for="inputCompanyRegistrationNumber" class="col-lg-4 col-lg-offset-1 control-label">Company registration number</label>
<div class="col-lg-4">
<input class="form-control" ng-model="$root.customerDetails.companyRegNo" placeholder="Enter company registration number" type="text" required="true">
</div>
</div>
</fieldset>
</form>
And Iam using $valid to validate the form
<div class="col-lg-1">
<button form="custForm" type="submit" class="btn btn-primary right-button" ng-click="customerForm.$valid && $ctrl.proceedToPaymentDetails()">Next</button>
</div>

data submitted into database if the informations are invalid using jquery,Ajax

I am new to Jquery and ajax.I want to check if mail id is already exist in database. So I use Ajax to check email is exist or not. I check this condition during submitting a form, so I use onSubmit event.
when I enter submit button the above condition is checked and then inserted into database.but If condition fails that email also inserted into database.
what is the error? I cannot find this error please help me!
my html code is:
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="inner">
<h3>Registration</h3>
<form class="form-horizontal" method="post" action = "" onSubmit=" return checkmail();">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Firstname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Firstname" name="fname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Lastname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Lastname"name="lname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" placeholder="Email" name="email" >
<span id="check"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="pass" placeholder="Password" name="pass" >
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">re-Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="repass" placeholder="re-Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Mobile no</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="mob" placeholder="Mobile no" name="phone">
</div>
<h6 id="aaa"></h6>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address1</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address1" name="addr1"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address2</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address2(optional)"name="addr2"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >Country</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Country" name="country">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="State" name="state">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >City</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="City" name="city">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Zipcode</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="zip" placeholder="EX:456322" name="zip" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" class="btn btn-default" name="submit" value="Register">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
my Jquery function is
function checkmail(){
var mail= $('#email').val();
if(mail ==""){
$("#email").focus();
alert("Enter mail id");
return false;
}
else
{
$.ajax({
type:'post',
url :'check.php',
data: {emailid:mail},
success: function(responseText){
$("#check").html(responseText);
if(responseText != 1) { // if the response is 1
$("#check").html("Available!");
return true;
}
else {
// else blank response
$("#email").focus();
$("#check").html("Email are already exist.");
return false;
}
}
});
}
}
</script>
check.php
<?php
$con = new mysqli('localhost','root','','registration'); //set coonection to db
$mail = $_POST['emailid'];
$query = mysqli_query($con, "select email from user where email='".$mail."' ");
if(mysqli_num_rows($query) > 0)
{
echo '1'; // if mail exist
}
?>
thank you in advance.

You should do something like this:
<form class="form-horizontal" method="post" action = "" onSubmit="checkmail()">
And put the script right after body tag starts.
I will recommend you to do this from jquery
$("#form-id").on('submit',function(e){
e.preventDefault();
// Validation for data
});

use below code with few modification.
The HTML
<body>
<div class="container">
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="inner">
<h3>Registration</h3>
<form id="myForm" class="form-horizontal" method="post" action="">
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Firstname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Firstname" name="fname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Lastname</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Lastname"name="lname">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" class="form-control" id="email" placeholder="Email" name="email" >
<span id="check"></span>
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="pass" placeholder="Password" name="pass" >
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-3 control-label">re-Password</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="repass" placeholder="re-Password">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Mobile no</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="mob" placeholder="Mobile no" name="phone">
</div>
<h6 id="aaa"></h6>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address1</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address1" name="addr1"></textarea>
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Address2</label>
<div class="col-sm-9">
<textarea class="form-control" id="inputEmail3" placeholder="Address2(optional)"name="addr2"></textarea>
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >Country</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="Country" name="country">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >State</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="State" name="state">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-3" >City</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="inputEmail3" placeholder="City" name="city">
</div>
</div>
<div class="form-group">
<label for="inputEmail3" class="col-sm-3 control-label">Zipcode</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="zip" placeholder="EX:456322" name="zip" >
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="button" onClick="checkmail();" class="btn btn-default" name="submit" value="Register">
</div>
</div>
</form>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
JQuery Code
function checkmail(){
var mail= $('#email').val();
if(mail ==""){
$("#email").focus();
alert("Enter mail id");
return false;
}
else
{
$.ajax({
type:'post',
url :'check.php',
data: {emailid:mail},
success: function(responseText){
$("#check").html(responseText);
if(responseText != 1) { // if the response is 1
$("#check").html("Available!");
$("#myForm").submit();
}
else {
// else blank response
$("#email").focus();
$("#check").html("Email are already exist.");
return false;
}
}
});
}
}
Change the id of form accordingly, which kept as myForm

Disable 'Continue' button

So I have the following fields, basically to create an account. This is just for a prototype. I was wondering how to disable the continue button and only enable the button once all fields have been completed. I have seen this can be done using jQuery and forms, but as this isn't really a form it doesn't work correctly. I understand it may be easier using but I have to use all of the fields there as they are shown. So basically is there a way for it work with only using what I already have?
<div id="form1">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Account information</legend>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">Username*: </label>
<input type="text" id="username" class="form-control" placeholder="Username" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Password*:</label><img src="help_icon.gif" title="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters." alt="Password must be between 8 and 15 characters, contain at least one number and one alphabetic character, and must not contain special characters.">
<input type="text" id="password" class="form-control" placeholder="Password" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Re-enter Password*:</label>
<input type="text" id="password1" class="form-control" placeholder="Password" required="">
</div>
</div>
</div>
<div id="form2">
<div class="row form-row form-bg">
<div class="container">
<div class="col-md-12 form-wrapper">
<form role="form">
<div class="form-content">
<legend class="hd-default">Contact information</legend>
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="form-group col-md-3 col-sm-3">
<label>Title</label>
<select name="title" class="form-control">
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Miss</option>
<option value="4">Dr</option>
<option value="5">Ms</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="first-name">First Names(s)*:</label>
<input type="text" id="firstname" class="form-control" placeholder="First Name(s)" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Surname*:</label>
<input type="text" id="surname" class="form-control" placeholder="Surname" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Email*:</label>
<input type="text" id="email" class="form-control" placeholder="Email" required="">
</div>
</div>
<div class="row">
<div class="form-group col-md-4 col-sm-6">
<label for="password">Re-enter Email*:</label>
<input type="text" id="email1" class="form-control" placeholder="Email" required="">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="form3"
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
</form>
</div>
<input type="submit" id="continue" value="Continue" disabled="disabled" a href="address.html"/>
</div>
</div>
</fieldset>
</div>
</form>
</div>

You may not have nested forms.
Once fixed, you can just check if the fields are empty or not after an input changes.
$('#continue').click(function(e){
e.preventDefault();
if(checkFields())
$('#form1').find('form').submit();
return false;
});
function checkFields() {
$('#form1 input').each(function(){
if($(this).val() == '')
return false;
else
return true;
});
}