Javascript 未为空字段调用Jquery验证定制方法（其他字段正常）
我有一个输入表格，其中包括三部分的出生日期 我已经编写了一个自定义验证方法来验证这3个部分，如果输入了这3个字段中的一个，则会调用该方法，但是如果所有或任何字段都为空，则需要调用该方法 我有console.log命令，因此可以查看是否调用了该方法，如果单击submit（提交时字段为空），则可以看到该方法未被调用，请在其中一个日期字段中输入一个数字，该方法将被调用 我能找到的所有类似问题都是表单根本没有经过验证，这确实验证了另一个字段 下面是示例代码 html cssJavascript 未为空字段调用Jquery验证定制方法（其他字段正常）,javascript,jquery,jquery-validate,Javascript,Jquery,Jquery Validate,我有一个输入表格，其中包括三部分的出生日期 我已经编写了一个自定义验证方法来验证这3个部分，如果输入了这3个字段中的一个，则会调用该方法，但是如果所有或任何字段都为空，则需要调用该方法 我有console.log命令，因此可以查看是否调用了该方法，如果单击submit（提交时字段为空），则可以看到该方法未被调用，请在其中一个日期字段中输入一个数字，该方法将被调用 我能找到的所有类似问题都是表单根本没有经过验证，这确实验证了另一个字段 下面是示例代码 html css jQueryValidate
jQueryValidate插件在用户与一个字段交互时（或提交时整个表单）只对该字段求值。它无法知道您是否希望在验证另一个字段时评估其他两个字段的验证规则 您必须编写一个jQuery
keyupfocusout.valid（）$('.my_group_of_date_fields').on('keyup focusout', function() {
$('.my_group_of_date_fields').each(function() {
$(this).valid();
})
});
$(document).ready(function () {
/* Custom validation method to validate a date based on several fields: */
$.validator.addMethod("datemultiple1", function(value, element, params) {
console.log("in datemultiple1");
var daySelector = params[0],
monthSelector = params[1],
yearSelector = params[2],
day = parseInt($(daySelector).val(), 10),
month = parseInt($(monthSelector).val(), 10),
year = parseInt($(yearSelector).val(), 10);
//dateEntered = new Date(year, month - 1, day);
var dateValid = false;
//elementDay="#"+daySelector;
$(daySelector).removeClass("input--error");
$(monthSelector).removeClass("input--error");
$(yearSelector).removeClass("input--error");
console.log(daySelector);
if (isNaN(day)) {
console.log("day not numeric");
$(daySelector).addClass("input--error");
}
if (isNaN(month)) {
console.log("month not numeric");
$(monthSelector).addClass("input--error");
}
if (isNaN(year)) {
console.log("year not numeric");
$(yearSelector).addClass("input--error");
}
dateEntered = day + "/" + month + "/" + year;
console.log("in datemultiple" + dateEntered.valueOf());
if(!isNaN(day) && !isNaN(month) && !isNaN(year)) {
console.log("all fields entered")
return this.optional(element) || /^(?:(?:31(\/|-|\.)(?:0?[13578]|1[02]))\1|(?:(?:29|30)(\/|-|\.)(?:0?[1,3-9]|1[0-2])\2))(?:(?:1[6-9]|[2-9]\d)?\d{2})$|^(?:29(\/|-|\.)0?2\3(?:(?:(?:1[6-9]|[2-9]\d)?(?:0[48]|[2468][048]|[13579][26])|(?:(?:16|[2468][048]|[3579][26])00))))$|^(?:0?[1-9]|1\d|2[0-8])(\/|-|\.)(?:(?:0?[1-9])|(?:1[0-2]))\4(?:(?:1[6-9]|[2-9]\d)?\d{2})$/.test(dateEntered.valueOf());
}
else
{
console.log("some fields blank");
return 1;
}
// return this.optional(element) || !isNaN(dateEntered.valueOf());
}, "Please enter a valid date");
var validator = $("#form1").validate({
rules: {
date_of_birth_day: { datemultiple1: ["#date_of_birth_day", "#date_of_birth_month", "#date_of_birth_year"]},
date_of_birth_month: { datemultiple1: ["#date_of_birth_day", "#date_of_birth_month", "#date_of_birth_year"]},
date_of_birth_year: { datemultiple1: ["#date_of_birth_day", "#date_of_birth_month", "#date_of_birth_year"]},
},
groups: {
date_of_birth: "date_of_birth_day date_of_birth_month date_of_birth_year",
},
debug: true,
messages: {
date_of_birth_year: {
required: "Please enter the day, month and year",
min: "Year must be 1900 or more"
},
date_of_birth_month: {
required: "Please enter the day, month and year",
min: "Month must be 1 or more",
max: "Month must be 12 or less"
},
date_of_birth_day: {
required: "Please enter the day, month and year",
min: "Day must be 1 or more",
max: "Day must be 31 or less"
}
},
errorPlacement: function(error, element) {
switch (true) {
case (element.attr("name")=="date_of_birth_day" || element.attr("name")=="date_of_birth_month" || element.attr("name")=="date_of_birth_year" ) :
error.appendTo("#error_location_date_of_birth");
break;
default:
// Append error within linked label
$( element )
error.appendTo("#error_location_"+ element.attr( "name" ));
console.log("add to ".concat(element.attr( "id" )));
console.log("add to name ".concat(element.attr( "name" )));
}
},
highlight: function(element, errorClass, validClass) {
console.log("highlight ".concat(element.name));
switch (true) {
case (element.name=="date_of_birth_day" || element.name=="date_of_birth_month" || element.name=="date_of_birth_year" ) :
//$("#form_group_date_of_birth").addClass("form-group--error");
$(element).addClass("input--error");
break;
default:
a2="#error_location_" + element.name + " span:first";
$(a2).remove();
$(element).parent().addClass("form-group--error");
$(element).addClass("input--error");
console.log("add class ".concat(element.name));
}
},
unhighlight: function(element, errorClass, validClass) {
console.log("unhighlight " + element.name);
switch (true) {
case (element.name=="date_of_birth_day" || element.name=="date_of_birth_month" || element.name=="date_of_birth_year" ) :
//$("#form_group_date_of_birth").removeClass("form-group--error");
$(element).removeClass("input--error");
console.log("unhighlight dob day");
break;
default:
$(element).parent().removeClass("form-group--error");
$(element).removeClass("input--error");
a2="#error_location_" + element.name + " span:first";
$(a2).remove();
}
},
});
});
.form-group {
margin-bottom: 30px;
}
.date-input__item {
display: inline-block;
margin-right: 20px;
margin-bottom: 0;
}
.fieldset {
margin: 0;
padding: 0;
border: 0;
}
.input--error {
border: 4px solid #b10e1e;
}
.form-group--error {
padding-left: 15px;
border-left: 5px solid #b10e1e;
}
$('.my_group_of_date_fields').on('keyup focusout', function() {
$('.my_group_of_date_fields').each(function() {
$(this).valid();
})
});