我编写了一个自定义客户端验证customValidateLeave，并在5个字段上调用它，现在的问题是，当我更改值然后多次击ajax时，使用组仅显示消息1次，但不知道如何自定义ajax。下面是工作代码
HTML代码
<form class="" method="POST" id="applyleave" action="add" enctype="multipart/form-data" autocomplete="off">
<div class="row">
<div class="form-group col-sm-6">
<label>TYPE OF LEAVE <sup>*</sup></label>
<select class="form-control valid" name="type_of_leave" id="type_of_leave" aria-required="true" aria-invalid="false">
<option value="">Select</option>
<option value="SL">Sick Leave</option>
</select>
</div>
</div>
<div class="row">
<lab el class="col-md-12">FROM DATE <sup>*</sup></label>
<div class="form-group col-sm-6">
<input type="text" value="<?php echo date('d-m-Y'); ?>" class="form-control leaveDateCal" id="from_date" name="from_date"/>
</div>
<div class="form-group col-sm-6">
<select class="form-control m-b" name="from_date_half" id="from_date_half" >
<option value="" disabled="">Select</option>
<option value="F">First Half</option>
<option value="S" >Second Half</option>
</select>
</div>
</div>
<div class="row">
<label class="col-md-12">TO DATE <sup>*</sup></label>
<div class="form-group date col-sm-6">
<input type="text" value="<?php echo date('d-m-Y'); ?>" class="form-control leaveDateCal" id="to_date" name="to_date"/>
</div>
<div class="form-group col-sm-6">
<select class="form-control m-b" name="to_date_half" id="to_date_half">
<option value="" disabled="">Select</option>
<option value="F" >First Half</option>
<option value="S" selected="true">Second Half</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group col-sm-6">
<label>NUMBER OF DAYS <sup>*</sup></label>
<input type="text" value="1" class="form-control" id="no_of_days" name="no_of_days" readonly/>
</div>
<div class="form-group col-sm-6">
<label>REASON FOR TAKING LEAVE <sup>*</sup></label>
<select class="form-control m-b valid" name="reason_taking_leave" id="reason_taking_leave" aria-required="true" aria-invalid="false"><option value="" disabled="">Select</option><option value="SL1">Sickness</option></select>
</div>
</div>
<div class="row">
<div class="form-group col-sm-12">
<label>MEDICAL CERTIFICATE</label>
<input type="file" class="" id="upload_certificate" name="upload_certificate" />
<span id="upload_anchor"></span>
<small>Only .jpeg, .gif,.jpg, .png, and .pdf are allowed and maximum upload size permitted is 2MB</small>
</div>
</div>
<div class="row">
<div class="form-group col-md-12 text-right">
<div class="">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
<div class="loader-modal" id="img_loader" style="display:none;"> <img src="images/loader.gif"></div>
</form>
jQuery代码
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
<script>
$(document).ready(function () {
$.validator.addMethod("customValidateLeave", function (val, elem) {
var values = $("#applyleave").serialize();
var is_valid = false;
$.ajax({
url: 'validate.php',
type: "POST",
dataType: "json",
data: values,
async: false,
dataFilter: function (response) {
response = $.parseJSON(response);
$('#no_of_days').val(response.days);
if (response.success === true) {
$.validator.messages.customValidateLeave = '';
is_valid = true;
} else {
$.validator.messages.customValidateLeave = response.message;
is_valid = false;
}
}
});
return is_valid;
}, $.validator.messages.customValidateLeave);
$("#applyleave").validate({
debug: true,
rules: {
type_of_leave: {
required: true
},
from_date: {
required: true,
customValidateLeave: true
},
to_date: {
required: true,
customValidateLeave: true
},
from_date_half: {
required: true,
customValidateLeave: true
},
to_date_half: {
required: true,
customValidateLeave: true
},
no_of_days: {
required: true,
min: 1,
customValidateLeave: true
}
},
messages: {
type_of_leave: {
required: "Type of leave field is required.",
},
from_date: {
required: "From date field is required.",
},
to_date: {
required: "To date field is required."
},
from_date_half: {
required: "From half field is required."
},
to_date_half: {
required: "To half field is required."
},
no_of_days: {
required: "No. of days field is required."
}
},
groups: {
no_of_days: "from_date to_date no_of_days from_date_half to_date_half"
},
errorElement: "em",
errorPlacement: function (error, element) {
error.addClass("help-block");
if (element.attr("name") === "from_date" || element.attr("name") === "to_date" || element.attr("name") === "from_date_half" || element.attr("name") === "to_date_half")
error.insertAfter("#no_of_days");
else
error.insertAfter(element);
},
submitHandler: function (form, element) {
console.log('submit');
form.submit(); // Submit the form
// return true;
}
}
);
});
</script>
validate.php代码
{"success":false,"message":"You already taken leave, please modify dates.","days":1}
当我运行此代码时，ajax会被击中多次（仅一次），请帮帮我。