0

フィルタとして範囲日付を持つレポートがあります。ユーザーは、各入力に独自の検証メッセージが必要であることを指定しました。したがって、ユーザーが 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つのフィールドだけで検証を呼び出す場合、エラークラスを他のフィールドに配置する方法を知っている人はいますか?

4

0 に答える 0