Когда я нажимаю кнопку «Отправить», отображаются все сообщения об ошибках проверки после этого, когда я правильно заполнил форму и отправил ее.Он только перезагружает форму и не переходит к методу обработчика отправки, иначе произошел вызов ajax.
Я использовал кнопку отправки внутри тега формы.Также не дано никаких действий по форме.Когда я использовал только AJAX без проверки, он работает нормально.
<form role="form" id="insertdata" method="post">
<!-- Step 1 Starts -->
<div class="row setup-content">
<h3> Step 1</h3>
<ul>
<li class="col-md-6 form-group">
<label class="control-label">Name</label>
<input type="text" name="name" id="name" class="form-control input-box" placeholder="Name" required="required" />
</li>
<li class="col-md-6 form-group">
<label class="control-label">Mobile</label>
<input type="text" class="form-control input-box" placeholder="Mobile" pattern="[0-9]{10}" onkeyup="this.value = this.value.replace(/[^0-9]/g, '');" maxlength="10" required="required" id="mobile" name="mobile" />
</li>
<li class="col-md-6 form-group">
<label class="control-label">E-mail</label>
<input type="text" class="form-control input-box" placeholder="E-mail" name="email" id="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,3}$" required="required" >
</li>
<!-- Script to use Input Email pattern Property -->
<script>
function mycode() {
var em = document.getElementById("email").pattern;
document.getElementById("GFG").innerHTML = em;
}
</script>
<li class="col-md-6 form-group">
<label class="control-label">City</label>
<?php
$query= "SELECT distinct field_city_name_value FROM field_data_field_city_name order by field_city_name_value";
$result=$db->select($query);
echo "<select name='city' id='city' class='form-control input-box selectbox' required='required'><option value=''>--Select City--</option>";
while($row =$result->fetch_array()):
{
echo "<option value='".$row["field_city_name_value"]."'>".($row["field_city_name_value"])."</option>";
}
endwhile;
echo "</select>";
?>
</li>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>
<script src="https://unpkg.com/gijgo@1.9.13/js/gijgo.min.js" type="text/javascript"></script>
<link href="https://unpkg.com/gijgo@1.9.13/css/gijgo.min.css" rel="stylesheet" type="text/css" />
<style>
.gj-picker-bootstrap{font-size: 12px; color: #000; border-radius:0px;}
.gj-picker-bootstrap table tr td.today div {color: #6600ab; border-radius: 4px;}
.gj-picker-bootstrap table tr td.focused div, .gj-picker-bootstrap table tr td.gj-cursor-pointer div:hover{background:#12ae28!important; color: #fff;}
.gj-picker-bootstrap table tr td.selected.gj-cursor-pointer div {color: #fff; background-color: #6600ab;}
.gj-picker-bootstrap table tr td.disabled div, .gj-picker-bootstrap table tr td.disabled div {color: #f00;}
</style>
<li class="col-md-6 form-group">
<label class="control-label">DOB</label>
<input class="form-control input-box" id="dob" placeholder="Select date of birth" name="dob" required="required" readonly="true" style="background: #fff;" />
<script>
$('#dob').datepicker({
uiLibrary: 'bootstrap',
format: 'mm/dd/yyyy',
maxDate: new Date("01/01/2000")
});
</script>
</li>
<!--<li class="col-md-6 form-group">
<label class="control-label">DOB</label>
<input type="date" class="form-control date" max="2000-01-01" placeholder="DOB" id="dob" name="dob" required="required" >
</li> -->
<li class="col-md-6 form-group">
<label class="control-label">Specialization</label>
<?php
$query= "SELECT distinct specialization FROM mlps_dr_specialization";
$result=$db->select($query);
if(!$result){
die('Could not get the data :'.$db->conn->error);
}
echo "<select name='specialization' id='specialization' class='form-control input-box selectbox'>";
while($row =$result->fetch_array()):
{
echo "<option value='".$row['specialization']."' >".($row["specialization"])."</option>";
}
endwhile;
echo "</select>";
?>
</li>
<li class="col-md-6 form-group">
<label class="control-label">Experience</label><br/>
<input type="text" class="form-control input-box" placeholder="Experience" id="experience" name="experience" onkeyup="this.value = this.value.replace(/[^0-9]/g, '');" required="required" style="width:85%;float:left;">
<input type="text" class="form-control input-box" placeholder="Years" id="koye" name="koye" readonly style="width:15%;float:left;">
</li>
<li class="col-md-6 form-group">
<label class="control-label">Sales Person name</label>
<input type="text" class="form-control input-box" placeholder="Sales Person name" id="sales_person" name="sales_person" required="required" >
</li>
<li class="col-md-6 form-group">
<label class="control-label">Area manager name</label>
<input type="text" class="form-control input-box" placeholder="Area manager name" id="area_manager" name="area_manager" required="required" >
</li>
<li class="col-md-6 form-group">
<label class="control-label">Territory Name</label>
<input type="text" class="form-control input-box" placeholder="Territory " id="territory_name" name="territory_name" required="required" >
</li>
<li class="col-md-6 form-group">
<label class="control-label">Employee Code</label><br/>
<input type="text" class="form-control input-box" placeholder="KOYE-" id="koye" name="koye" readonly style="width:20%;float:left;">
<input type="text" class="form-control input-box" placeholder="Employee Code" id="emp_code" name="emp_code" style="width:80%;float:left;" maxlength="4" required="required" >
</li>
<li class="col-md-12 form-group">
<label class="control-label">Message</label>
<textarea rows="5" class="form-control textarea" id="message" name="message" placeholder="Message"></textarea>
</li>
<li class="col-md-12">
<button class="nextBtn pull-right" id="insert" name='insert' type="submit">Submit</button
</li>
</ul>
</div>
</form>
выше мой HTML-код.
$(document).ready(function() {
$(":input").keyup(function() {
$(this).val($(this).val().replace(/^\s+/, ""));
});
$(function() {
$("#insertdata").validate({
rules: {
name: {
required: true
},
mobile: {
required: true,
remote: "check-username.php",
data: {
mobile: function() {
return $("#mobile").val();
}
}
},
email: {
required: true,
remote: "check-username.php",
data: {
email: function() {
return $("#email").val();
}
}
},
experience: {
required: true
},
sales_person: {
required: true
},
area_manager: {
required: true
},
territory_name: {
required: true
},
emp_code: {
required: true
}
},
messages: {
name: {
required: "Please enter name"
},
mobile: {
required: "Please enter contact number",
remote: "mobile number already exist"
},
email: {
required: "Please enter Email Id",
remote: "Email already in use!"
},
experience: {
required: "Please enter experience."
},
sales_person: {
required: "Please enter sales Person name."
},
area_manager: {
required: "Please enter area manager name."
},
territory_name: {
required: "Please enter Territory name."
},
emp_code: {
required: "Please enter Employee code."
}
},
errorPlacement: function(error, element) {
error.appendTo(element.parents('.controls'));
},
submitHandler: function(form) {
alert("hello");
$.ajax({
type: 'post',
url: 'mailtodoctor.php',
data: $(form).serialize(),
success: function(data) {
alert(data);
$('#insertdata')[0].reset();
window.location.href = "thankyou.php";
}
});
}
});
});
});