Javascript jQuery验证-如何防止插件验证特定功能的onblur事件?
当发生模糊事件时,是否有任何方法阻止jQuery验证验证表单 我有三对开始/结束日期,这六个字段中的每一个都使用DatePicker加上每一对日期来验证这对字段中的另一个字段是否已填写,因为如果已填写结束日期但未填写开始日期,则无法提交表单,反之亦然 当用户从DatePicker中选择日期时,浏览器触发模糊事件,jQuery validate尝试验证表单,并意识到该对的另一个字段为空,然后显示错误消息,就会出现问题。此外,当用户填充该对中的第二个字段时,在填充该字段之前会再次触发模糊事件,验证插件会显示错误消息 HTML:Javascript jQuery验证-如何防止插件验证特定功能的onblur事件?,javascript,jquery,validation,datepicker,jquery-validate,Javascript,Jquery,Validation,Datepicker,Jquery Validate,当发生模糊事件时,是否有任何方法阻止jQuery验证验证表单 我有三对开始/结束日期,这六个字段中的每一个都使用DatePicker加上每一对日期来验证这对字段中的另一个字段是否已填写,因为如果已填写结束日期但未填写开始日期,则无法提交表单,反之亦然 当用户从DatePicker中选择日期时,浏览器触发模糊事件,jQuery validate尝试验证表单,并意识到该对的另一个字段为空,然后显示错误消息,就会出现问题。此外,当用户填充该对中的第二个字段时,在填充该字段之前会再次触发模糊事件,验证插
<form>
<table width="95%" id="tabela_interna">
<thead><tr valign="middle"><th colspan="6">Report</th></tr></thead>
<tbody>
<tr valign="middle">
<td width="14%" align="left" class="td_label"><label for="dataInicialSolicitacao">Data de Solicitação Inicial</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataInicialSolicitacao" size="12" value="" id="dataInicialSolicitacao" class="data atLeastOneRequired"/>
</td>
<td width="12%" align="left" class="td_label"><label for="dataFinalSolicitacao">Data de Solicitação Final</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataFinalSolicitacao" size="12" value="" id="dataFinalSolicitacao" class="data atLeastOneRequired"/>
</td>
</tr>
<tr valign="middle">
<td width="14%" align="left" class="td_label"><label for="dataInicialLiberacao">Data de Liberação Inicial</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataInicialLiberacao" size="12" value="" id="dataInicialLiberacao" class="data atLeastOneRequired"/>
</td>
<td width="12%" align="left" class="td_label"><label for="dataFinalLiberacao">Data de Liberação Final</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataFinalLiberacao" size="12" value="" id="dataFinalLiberacao" class="data atLeastOneRequired"/>
</td>
</tr>
<tr valign="middle">
<td width="14%" align="left" class="td_label"><label for="dataInicialInternacao">Data de Internação Inicial</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataInicialInternacao" size="12" value="" id="dataInicialInternacao" class="data atLeastOneRequired"/>
</td>
<td width="12%" align="left" class="td_label"><label for="dataFinalInternacao">Data de Internação Final</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataFinalInternacao" size="12" value="" id="dataFinalInternacao" class="data atLeastOneRequired"/>
</td>
</tr>
</tbody>
</table>
</form>
$.fn.aplicaLayoutPersonalizavel = function() {
personalizaAplicacao();
return this;
};
function personalizaAplicacao() {
$(".data").apagaDataInvalida().mask("99/99/9999").numeric().datepicker().attr("maxlength", 10);
}
$.validator.setDefaults({
errorContainer : "#msgErros ul",
errorLabelContainer: "#msgErros",
wrapper: "li",
submitHandler: function(form) {
var erros = $("div#msgErros");
if (typeof $("#acao").val() === "undefined") {
if (erros.length > 1) {
erros.empty();
}
stopAnimating();
erros.html("<ul><li>O parâmetro ação deve ser definido.</li></ul>");
erros.show();
return false;
}
$.blockUI();
var dadosRelatorio = $(form).formSerialize();
switch (parseInt($("#acao").val())) {
case 1:
if (typeof urlRelatorio !== 'undefined' && urlRelatorio != null) {
$("#respostaRelatorio").jqGrid("GridUnload");
$("#respostaRelatorio").jqGrid({
url: urlRelatorio + "?" + dadosRelatorio,
colModel: modeloColunas,
autowidth: typeof larguraAutomatizada !== "undefined" && larguraAutomatizada != null ? larguraAutomatizada : false
});
} else {
form.submit();
}
break;
case 2:
downloadArquivo(urlExportarExcel, dadosRelatorio);
break;
case 3:
downloadArquivo(urlExportarPdf, dadosRelatorio);
break;
}
},
invalidHandler: function() { stopAnimating(); }
});
$.fn.inicializaValidacaoFormulario = function() {
$("form").validate({
rules: typeof regras !== "undefined" && regras != null ? regras : {},
messages: typeof mensagens !== "undefined" && mensagens != null ? mensagens : {},
agrupamentos: typeof agrupamentos !== "undefined" && agrupamentos != null ? agrupamentos : {}
});
return this;
};
regras = {
"filtro.codigoProcedimento": { range: [1, 9223372036854775807] },
"filtro.codigoHospital": { range: [1, 9223372036854775807] },
"filtro.codigoSegurado": { range: [1, 9223372036854775807] },
"filtro.numeroSolicitacao": { range: [1, 2147483647] },
"filtro.dataInicialSolicitacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataFinalSolicitacao", maximunDifferenceBetweenDates: ["#dataFinalSolicitacao", 90] },
"filtro.dataFinalSolicitacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataInicialSolicitacao", maximunDifferenceBetweenDates: ["#dataInicialSolicitacao", 90] },
"filtro.dataInicialInternacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataFinalInternacao", maximunDifferenceBetweenDates: ["#dataFinalInternacao", 90] },
"filtro.dataFinalInternacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataInicialInternacao", maximunDifferenceBetweenDates: ["#dataInicialInternacao", 90] },
"filtro.dataInicialLiberacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataFinalLiberacao", maximunDifferenceBetweenDates: ["#dataFinalLiberacao", 90] },
"filtro.dataFinalLiberacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataInicialLiberacao", maximunDifferenceBetweenDates: ["#dataInicialLiberacao", 90] }
};
mensagens = {
"filtro.codigoProcedimento": { range: "Por favor, insira um valor entre 1 e 9223372036854775807 ao preencher o cartão." },
"filtro.codigoHospital": { range: "Por favor, insira um valor entre 1 e 9223372036854775807 ao preencher o estipulante." },
"filtro.codigoSegurado": { range: "Por favor, insira um valor entre 1 e 9223372036854775807 ao preencher a solicitação." },
"filtro.numeroSolicitacao": { range: "Por favor, insira um valor entre 1 e 2147483647 ao preencher o referenciado." }
};
agrupamentos = {
datasSolicitacao: "#dataInicialSolicitacao #dataFinalSolicitacao",
datasLiberacao: "#dataInicialLiberacao #dataFinalLiberacao",
datasInternacao: "#dataInicialInternacao #dataFinalInternacao"
};
$.extend($.validator.messages, {
require_from_group: $.format("Por favor, preencha ao menos {0} uma das duplas de datas para realizar a consulta.")
});
$.fn.inicializaValidacaoFormulario = function() {
$("form").validate({
rules: typeof regras !== "undefined" && regras != null ? regras : {},
messages: typeof mensagens !== "undefined" && mensagens != null ? mensagens : {},
agrupamentos: typeof agrupamentos !== "undefined" && agrupamentos != null ? agrupamentos : {},
onfocusout: typeof preventBlurEvents !== "undefined" && preventBlurEvents != null ? preventBlurEvents : {}
});
return this;
};
preventBlurEvents = function (element, event) {
if (!$(element).attr("class").contains("data")) {
$.validator.defaults.onfocusout.call(this, element, event);
}
};
我不希望插件在发生模糊事件时停止验证其他表单,仅此一个。有什么建议吗?解决方案是覆盖jQuery验证插件的onfocusout属性。因此,我如上所述: jQuery插件中的更改:
<form>
<table width="95%" id="tabela_interna">
<thead><tr valign="middle"><th colspan="6">Report</th></tr></thead>
<tbody>
<tr valign="middle">
<td width="14%" align="left" class="td_label"><label for="dataInicialSolicitacao">Data de Solicitação Inicial</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataInicialSolicitacao" size="12" value="" id="dataInicialSolicitacao" class="data atLeastOneRequired"/>
</td>
<td width="12%" align="left" class="td_label"><label for="dataFinalSolicitacao">Data de Solicitação Final</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataFinalSolicitacao" size="12" value="" id="dataFinalSolicitacao" class="data atLeastOneRequired"/>
</td>
</tr>
<tr valign="middle">
<td width="14%" align="left" class="td_label"><label for="dataInicialLiberacao">Data de Liberação Inicial</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataInicialLiberacao" size="12" value="" id="dataInicialLiberacao" class="data atLeastOneRequired"/>
</td>
<td width="12%" align="left" class="td_label"><label for="dataFinalLiberacao">Data de Liberação Final</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataFinalLiberacao" size="12" value="" id="dataFinalLiberacao" class="data atLeastOneRequired"/>
</td>
</tr>
<tr valign="middle">
<td width="14%" align="left" class="td_label"><label for="dataInicialInternacao">Data de Internação Inicial</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataInicialInternacao" size="12" value="" id="dataInicialInternacao" class="data atLeastOneRequired"/>
</td>
<td width="12%" align="left" class="td_label"><label for="dataFinalInternacao">Data de Internação Final</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataFinalInternacao" size="12" value="" id="dataFinalInternacao" class="data atLeastOneRequired"/>
</td>
</tr>
</tbody>
</table>
</form>
$.fn.aplicaLayoutPersonalizavel = function() {
personalizaAplicacao();
return this;
};
function personalizaAplicacao() {
$(".data").apagaDataInvalida().mask("99/99/9999").numeric().datepicker().attr("maxlength", 10);
}
$.validator.setDefaults({
errorContainer : "#msgErros ul",
errorLabelContainer: "#msgErros",
wrapper: "li",
submitHandler: function(form) {
var erros = $("div#msgErros");
if (typeof $("#acao").val() === "undefined") {
if (erros.length > 1) {
erros.empty();
}
stopAnimating();
erros.html("<ul><li>O parâmetro ação deve ser definido.</li></ul>");
erros.show();
return false;
}
$.blockUI();
var dadosRelatorio = $(form).formSerialize();
switch (parseInt($("#acao").val())) {
case 1:
if (typeof urlRelatorio !== 'undefined' && urlRelatorio != null) {
$("#respostaRelatorio").jqGrid("GridUnload");
$("#respostaRelatorio").jqGrid({
url: urlRelatorio + "?" + dadosRelatorio,
colModel: modeloColunas,
autowidth: typeof larguraAutomatizada !== "undefined" && larguraAutomatizada != null ? larguraAutomatizada : false
});
} else {
form.submit();
}
break;
case 2:
downloadArquivo(urlExportarExcel, dadosRelatorio);
break;
case 3:
downloadArquivo(urlExportarPdf, dadosRelatorio);
break;
}
},
invalidHandler: function() { stopAnimating(); }
});
$.fn.inicializaValidacaoFormulario = function() {
$("form").validate({
rules: typeof regras !== "undefined" && regras != null ? regras : {},
messages: typeof mensagens !== "undefined" && mensagens != null ? mensagens : {},
agrupamentos: typeof agrupamentos !== "undefined" && agrupamentos != null ? agrupamentos : {}
});
return this;
};
regras = {
"filtro.codigoProcedimento": { range: [1, 9223372036854775807] },
"filtro.codigoHospital": { range: [1, 9223372036854775807] },
"filtro.codigoSegurado": { range: [1, 9223372036854775807] },
"filtro.numeroSolicitacao": { range: [1, 2147483647] },
"filtro.dataInicialSolicitacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataFinalSolicitacao", maximunDifferenceBetweenDates: ["#dataFinalSolicitacao", 90] },
"filtro.dataFinalSolicitacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataInicialSolicitacao", maximunDifferenceBetweenDates: ["#dataInicialSolicitacao", 90] },
"filtro.dataInicialInternacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataFinalInternacao", maximunDifferenceBetweenDates: ["#dataFinalInternacao", 90] },
"filtro.dataFinalInternacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataInicialInternacao", maximunDifferenceBetweenDates: ["#dataInicialInternacao", 90] },
"filtro.dataInicialLiberacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataFinalLiberacao", maximunDifferenceBetweenDates: ["#dataFinalLiberacao", 90] },
"filtro.dataFinalLiberacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataInicialLiberacao", maximunDifferenceBetweenDates: ["#dataInicialLiberacao", 90] }
};
mensagens = {
"filtro.codigoProcedimento": { range: "Por favor, insira um valor entre 1 e 9223372036854775807 ao preencher o cartão." },
"filtro.codigoHospital": { range: "Por favor, insira um valor entre 1 e 9223372036854775807 ao preencher o estipulante." },
"filtro.codigoSegurado": { range: "Por favor, insira um valor entre 1 e 9223372036854775807 ao preencher a solicitação." },
"filtro.numeroSolicitacao": { range: "Por favor, insira um valor entre 1 e 2147483647 ao preencher o referenciado." }
};
agrupamentos = {
datasSolicitacao: "#dataInicialSolicitacao #dataFinalSolicitacao",
datasLiberacao: "#dataInicialLiberacao #dataFinalLiberacao",
datasInternacao: "#dataInicialInternacao #dataFinalInternacao"
};
$.extend($.validator.messages, {
require_from_group: $.format("Por favor, preencha ao menos {0} uma das duplas de datas para realizar a consulta.")
});
$.fn.inicializaValidacaoFormulario = function() {
$("form").validate({
rules: typeof regras !== "undefined" && regras != null ? regras : {},
messages: typeof mensagens !== "undefined" && mensagens != null ? mensagens : {},
agrupamentos: typeof agrupamentos !== "undefined" && agrupamentos != null ? agrupamentos : {},
onfocusout: typeof preventBlurEvents !== "undefined" && preventBlurEvents != null ? preventBlurEvents : {}
});
return this;
};
preventBlurEvents = function (element, event) {
if (!$(element).attr("class").contains("data")) {
$.validator.defaults.onfocusout.call(this, element, event);
}
};
我将此添加到验证中:
<form>
<table width="95%" id="tabela_interna">
<thead><tr valign="middle"><th colspan="6">Report</th></tr></thead>
<tbody>
<tr valign="middle">
<td width="14%" align="left" class="td_label"><label for="dataInicialSolicitacao">Data de Solicitação Inicial</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataInicialSolicitacao" size="12" value="" id="dataInicialSolicitacao" class="data atLeastOneRequired"/>
</td>
<td width="12%" align="left" class="td_label"><label for="dataFinalSolicitacao">Data de Solicitação Final</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataFinalSolicitacao" size="12" value="" id="dataFinalSolicitacao" class="data atLeastOneRequired"/>
</td>
</tr>
<tr valign="middle">
<td width="14%" align="left" class="td_label"><label for="dataInicialLiberacao">Data de Liberação Inicial</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataInicialLiberacao" size="12" value="" id="dataInicialLiberacao" class="data atLeastOneRequired"/>
</td>
<td width="12%" align="left" class="td_label"><label for="dataFinalLiberacao">Data de Liberação Final</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataFinalLiberacao" size="12" value="" id="dataFinalLiberacao" class="data atLeastOneRequired"/>
</td>
</tr>
<tr valign="middle">
<td width="14%" align="left" class="td_label"><label for="dataInicialInternacao">Data de Internação Inicial</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataInicialInternacao" size="12" value="" id="dataInicialInternacao" class="data atLeastOneRequired"/>
</td>
<td width="12%" align="left" class="td_label"><label for="dataFinalInternacao">Data de Internação Final</label></td>
<td width="25%" align="left" class="td_dados">
<input type="text" name="filtro.dataFinalInternacao" size="12" value="" id="dataFinalInternacao" class="data atLeastOneRequired"/>
</td>
</tr>
</tbody>
</table>
</form>
$.fn.aplicaLayoutPersonalizavel = function() {
personalizaAplicacao();
return this;
};
function personalizaAplicacao() {
$(".data").apagaDataInvalida().mask("99/99/9999").numeric().datepicker().attr("maxlength", 10);
}
$.validator.setDefaults({
errorContainer : "#msgErros ul",
errorLabelContainer: "#msgErros",
wrapper: "li",
submitHandler: function(form) {
var erros = $("div#msgErros");
if (typeof $("#acao").val() === "undefined") {
if (erros.length > 1) {
erros.empty();
}
stopAnimating();
erros.html("<ul><li>O parâmetro ação deve ser definido.</li></ul>");
erros.show();
return false;
}
$.blockUI();
var dadosRelatorio = $(form).formSerialize();
switch (parseInt($("#acao").val())) {
case 1:
if (typeof urlRelatorio !== 'undefined' && urlRelatorio != null) {
$("#respostaRelatorio").jqGrid("GridUnload");
$("#respostaRelatorio").jqGrid({
url: urlRelatorio + "?" + dadosRelatorio,
colModel: modeloColunas,
autowidth: typeof larguraAutomatizada !== "undefined" && larguraAutomatizada != null ? larguraAutomatizada : false
});
} else {
form.submit();
}
break;
case 2:
downloadArquivo(urlExportarExcel, dadosRelatorio);
break;
case 3:
downloadArquivo(urlExportarPdf, dadosRelatorio);
break;
}
},
invalidHandler: function() { stopAnimating(); }
});
$.fn.inicializaValidacaoFormulario = function() {
$("form").validate({
rules: typeof regras !== "undefined" && regras != null ? regras : {},
messages: typeof mensagens !== "undefined" && mensagens != null ? mensagens : {},
agrupamentos: typeof agrupamentos !== "undefined" && agrupamentos != null ? agrupamentos : {}
});
return this;
};
regras = {
"filtro.codigoProcedimento": { range: [1, 9223372036854775807] },
"filtro.codigoHospital": { range: [1, 9223372036854775807] },
"filtro.codigoSegurado": { range: [1, 9223372036854775807] },
"filtro.numeroSolicitacao": { range: [1, 2147483647] },
"filtro.dataInicialSolicitacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataFinalSolicitacao", maximunDifferenceBetweenDates: ["#dataFinalSolicitacao", 90] },
"filtro.dataFinalSolicitacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataInicialSolicitacao", maximunDifferenceBetweenDates: ["#dataInicialSolicitacao", 90] },
"filtro.dataInicialInternacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataFinalInternacao", maximunDifferenceBetweenDates: ["#dataFinalInternacao", 90] },
"filtro.dataFinalInternacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataInicialInternacao", maximunDifferenceBetweenDates: ["#dataInicialInternacao", 90] },
"filtro.dataInicialLiberacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataFinalLiberacao", maximunDifferenceBetweenDates: ["#dataFinalLiberacao", 90] },
"filtro.dataFinalLiberacao": { require_from_group: [1, ".atLeastOneRequired"], ifDateIsFilledOtherOneIsMandatory: "#dataInicialLiberacao", maximunDifferenceBetweenDates: ["#dataInicialLiberacao", 90] }
};
mensagens = {
"filtro.codigoProcedimento": { range: "Por favor, insira um valor entre 1 e 9223372036854775807 ao preencher o cartão." },
"filtro.codigoHospital": { range: "Por favor, insira um valor entre 1 e 9223372036854775807 ao preencher o estipulante." },
"filtro.codigoSegurado": { range: "Por favor, insira um valor entre 1 e 9223372036854775807 ao preencher a solicitação." },
"filtro.numeroSolicitacao": { range: "Por favor, insira um valor entre 1 e 2147483647 ao preencher o referenciado." }
};
agrupamentos = {
datasSolicitacao: "#dataInicialSolicitacao #dataFinalSolicitacao",
datasLiberacao: "#dataInicialLiberacao #dataFinalLiberacao",
datasInternacao: "#dataInicialInternacao #dataFinalInternacao"
};
$.extend($.validator.messages, {
require_from_group: $.format("Por favor, preencha ao menos {0} uma das duplas de datas para realizar a consulta.")
});
$.fn.inicializaValidacaoFormulario = function() {
$("form").validate({
rules: typeof regras !== "undefined" && regras != null ? regras : {},
messages: typeof mensagens !== "undefined" && mensagens != null ? mensagens : {},
agrupamentos: typeof agrupamentos !== "undefined" && agrupamentos != null ? agrupamentos : {},
onfocusout: typeof preventBlurEvents !== "undefined" && preventBlurEvents != null ? preventBlurEvents : {}
});
return this;
};
preventBlurEvents = function (element, event) {
if (!$(element).attr("class").contains("data")) {
$.validator.defaults.onfocusout.call(this, element, event);
}
};