我正在构建一个WordPress主题的自定义联系表单。我一直试图显示Flatpickr日期字段的验证错误消息,但它不起作用。我甚至尝试了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);
}
}
});
});
});
字符串
2条答案
按热度按时间tpxzln5u1#
最后,我让它工作了。我试图在谷歌上找到我的问题的答案,幸运的是我达到了this post由维克托梁。虽然他的解决方案是基于onOpen和onClose的日历状态,但我们也可以将其用于onReady。
将下面的代码添加到flatpickr选项
字符串
这段代码将从输入字段中删除
readonly
属性。请查看Victor's article了解更多信息。他解释得很好。这是我完整的工作代码
型
如果有更好的解决方案,请告诉我。
qacovj5a2#
你需要编辑日期的下一个元素,因为flatpckr会生成新的元素来保存值。
字符串