我正在WordPress主题中构建一个自定义联系人表单。我一直试图显示Flatpacker日期字段的验证错误消息，但它不起作用。我甚至尝试过form.find('input[type=hidden]').val()来获取该值，但是它仍然不起作用。
日期选择器字段值正在提交到数据库，只有验证错误没有显示。
由于我是jquery的新手，所以希望有更简单的解决方案。
提前谢谢。
这是我的代码
jQuery(document).ready(function ($) {
// Date picker
$("#date").flatpickr({
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
minDate: "today",
maxDate: new Date().fp_incr(30), // 14 days from now
"disable": [
function(date) {
// return true to disable
return (date.getDay() === 0 || date.getDay() === 6);
}
],
"locale": {
"firstDayOfWeek": 1 // start week on Monday
}
});
/* contact form submission */
$('#someForm').on('submit', function (e) {
e.preventDefault();
$('.was-validated').removeClass('.was-validated');
var form = $(this),
name = form.find('#name').val(),
email = form.find('#email').val(),
service = form.find('#service').val(),
date = form.find('input[type=hidden]').val(),
message = form.find('#message').val(),
ajaxurl = form.data('url');
if (name === '') {
$('#name').parent('.col-lg-2').addClass('was-validated');
return;
}
if( email === '' ){
$('#email').parent('.col-lg-2').addClass('was-validated');
return;
}
if( service === '' ){
$('#service').parent('.col-lg-2').addClass('was-validated');
return;
}
// This bit of code is not working.
if( date === '' ){
$('#date').parent('.col-lg-2').addClass('was-validated');
return;
}
$('#submitButton').html('Processing...');
form.find('input, button, textarea, select').attr('disabled','disabled');
$.ajax({
url : ajaxurl,
type : 'post',
data : {
name : name,
email : email,
service: service,
aptDate: aptDate,
message : message,
action: 'save_user_contact_form'
},
error : function( response ){
$('#formErrorMessage').modal('show');
$('#submitButton').html('Submit');
form.find('input, button, textarea, select').removeAttr('disabled');
},
success : function( response ){
if( response == 0 ){
setTimeout(function(){
$('#formErrorMessage').modal('show');
$('#submitButton').html('Submit');
form.find('input, button, textarea, select').removeAttr('disabled');
},1500);
} else {
setTimeout(function(){
$('#formSuccessMessage').modal('show');
$('.col-lg-2').removeClass('was-validated');
$('#submitButton').html('Submit');
form.find('input, button, textarea, select').removeAttr('disabled').val('');
},1500);
}
}
});
});
});
最后，我让它工作起来了。我试图在谷歌上找到我的问题的答案，幸运的是，我收到了梁的这篇帖子。虽然他的解决方案基于日历状态onOpen和onClose，但我们也可以将其用于onReady。
将以下代码添加到扁平拾取器选项
allowInput: true,
onReady: function(selectedDates, dateStr, instance) {
$(instance.altInput).prop('readonly', false);
},
这段代码将从输入字段中删除readonly属性。请查看维克多的文章了解更多信息。他解释得很好。
这是我完整的工作代码
jQuery(document).ready(function ($) {
// Date picker
$("#aptdate").flatpickr({
allowInput: true,
altInput: true,
altFormat: "F j, Y",
dateFormat: "d-m-Y",
minDate: "today",
maxDate: new Date().fp_incr(30), // 30 days from now
"disable": [
function(date) {
// return true to disable dates based on days
return (date.getDay() === 0 || date.getDay() === 6);
}
],
"locale": {
"firstDayOfWeek": 1 // start week on Monday
},
// Remove readonly attribute from the date input field
onReady: function(selectedDates, dateStr, instance) {
$(instance.altInput).prop('readonly', false);
},
});
/* contact form submission */
$('#someForm').on('submit', function (e) {
e.preventDefault();
$('.was-validated').removeClass('.was-validated');
var form = $(this),
name = form.find('#name').val(),
email = form.find('#email').val(),
service = form.find('#service').val(),
aptDate = form.find('#aptdate').val(),
message = form.find('#message').val(),
ajaxurl = form.data('url');
if (name === '') {
$('#name').parent('.col-lg-2').addClass('was-validated');
return;
}
if( email === '' ){
$('#email').parent('.col-lg-2').addClass('was-validated');
return;
}
if( service === '' ){
$('#service').parent('.col-lg-2').addClass('was-validated');
return;
}
if ( aptDate === '' ) {
$('#aptdate').parent('.col-lg-2').addClass('was-validated');
return;
}
$('#submitButton').html('Processing...');
form.find('input, button, textarea, select').attr('disabled','disabled');
$.ajax({
url : ajaxurl,
type : 'post',
data : {
name : name,
email : email,
service: service,
aptDate: aptDate,
message : message,
action: 'save_user_contact_form'
},
error : function( response ){
$('#formErrorMessage').modal('show');
$('#submitButton').html('Submit');
form.find('input, button, textarea, select').removeAttr('disabled');
},
success : function( response ){
if( response == 0 ){
setTimeout(function(){
$('#formErrorMessage').modal('show');
$('#submitButton').html('Submit');
form.find('input, button, textarea, select').removeAttr('disabled');
},1500);
} else {
setTimeout(function(){
$('#formSuccessMessage').modal('show');
$('.col-lg-2').removeClass('was-validated');
$('#submitButton').html('Submit');
form.find('input, button, textarea, select').removeAttr('disabled').val('');
},1500);
}
}
});
});
});
如果有更好的解决方案，请告诉我。
您需要编辑日期的下一个元素，因为flatpckr会生成新的元素来保存值。
const date= $('#date');
if (date.attr("class").includes("is-invalid")) {
date.next().removeClass("is-invalid");
date.next().addClass("is-invalid");
} else {
date.next().removeClass("is-invalid");
}