フィルタとして範囲日付を持つレポートがあります。ユーザーは、各入力に独自の検証メッセージが必要であることを指定しました。したがって、ユーザーが 2 つの無効な日付を入力すると、入力ごとに 1 つずつ、2 つの無効なメッセージが表示されます。しかし、ユーザーは、2 つの入力が原因で検証が失敗した場合 (つまり、開始日が終了日より前でない場合) にもメッセージを求めています。これが私の現在のコードです:
$(document).ready(function() {
// Quick search
$('input#email_search_list').quicksearch('#detailed-opt-out-report #detailed-opt-out-report-table tbody tr');
// A custom method for validating the date range.
$.validator.addMethod("dateRange", function() {
var startDate = $("#startDate").val();
var endDate = $("#endDate").val();
return isDate(startDate) && isDate(endDate) ? Date.parse(startDate) <= Date.parse(endDate) : true;
});
// Another custom method for validating if at least one of the fields has value.
$.validator.addMethod("bothEmpty", function() {
return $("#startDate").val() || $("#endDate").val();
});
var form = $('#frmdetailedoptoutreport');
form.validate({
submitHandler: function(form) {
$.blockUI({fadeIn:0, message: '<h1>Por favor, aguarde...</h1>'});
form.submit();
},
rules: {
startDate: {
date: true,
dateRange: true,
bothEmpty: true
},
endDate: {
date: true,
dateRange: true,
bothEmpty: true
}
},
errorPlacement: function(error, element) {
alert("oi");
form.find(".errorContainer").append(error);
},
messages: {
startDate: {
date: "Por favor, especifique uma data inicial válida.",
bothEmpty: "É obrigatório inserir pelo menos um filtro na busca.",
dateRange: "A data final não pode ser menor que a data inicial."
},
endDate: {
date: "Por favor, especifique uma data final válida."
}
}
});
});
HTMLコードは次のとおりです。
<form id="frmdetailedoptoutreport" name="frmdetailedoptoutreport" method="post" action="detailedoptoutreport">
<fieldset class="form">
<input type="hidden" name="page" id="page" value="1" />
<p>
<label for="startDate">Selecione intervalo de data:</label>
<input class="datapicker" id="startDate" type="text" name="startDate" value="" maxlength="10" />
a
<input class="datapicker" id="endDate" type="text" name="endDate" value="" maxlength="10" />
</p>
<div class="errorContainer"></div>
<div class="clr"></div>
<input type="submit" value="Filtrar" onclick="restartPagination();" />
</fieldset>
</form>
restartPagination および isDate JS 関数:
function restartPagination() {
$("#page").val(1);
}
function isDate(txtDate) {
if (!txtDate) {
return false;
}
// Declare Regex
var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
var dtArray = txtDate.match(rxDatePattern); // is format OK?
if (dtArray == null) {
return false;
}
// Checks for dd/MM/yyyy format.
dtDay = dtArray[1];
dtMonth = dtArray[3];
dtYear = dtArray[5];
if (dtMonth < 1 || dtMonth > 12) {
return false;
} else if (dtDay < 1 || dtDay > 31) {
return false;
} else if ((dtMonth == 4 || dtMonth == 6 || dtMonth == 9 || dtMonth == 11) && dtDay == 31) {
return false;
} else if (dtMonth == 2) {
var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
if (dtDay > 29 || (dtDay == 29 && !isleap)) {
return false;
}
}
return true;
}
残念ながら、このコードでは、望ましくない 2 つの動作が発生します。最初の動作は、検証が 2 回実行されることです。わかりました。フィールドの 1 つでバリデーションをカットすると、これは解決しますが、これを行うと、入力は、ユーザー仕様の 1 つである CSS エラー クラスを取得しません (問題のある入力に色を付けます)。
私が望まない 2 番目の動作は、メッセージが複製されることです。繰り返しますが、入力の 1 つから検証を切り離すと、問題は解決しますが、入力は CSS エラー クラスを失います。jquery グループバリデーターを使用すると、1 つのメッセージが表示されますが、両方のフィールドに無効な日付があり、上記で説明したように 2 つのメッセージがある場合、2 番目のメッセージが最初のメッセージを上書きします。
だから、ここに私の質問があります.1つのフィールドだけで検証を呼び出す場合、エラークラスを他のフィールドに配置する方法を知っている人はいますか?