0

我有一个以范围日期作为过滤器的报告。用户已指定每个输入都必须有自己的验证消息。因此，如果用户输入了两个无效日期，那么我就有两条无效消息，每个输入一条。但是当验证失败时，用户也想要消息，因为这两个输入，即，如果开始日期不早于结束日期。这是我当前的代码：

$(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;
}

不幸的是，这段代码给了我两种我不想要的行为。第一个行为是验证执行了两次。好的，如果我切断其中一个字段的验证，我会解决这个问题，但如果我这样做，输入不会获得作为我的用户规范之一的 CSS 错误类（为有问题的输入着色）。

我不想要的第二个行为是消息被复制。同样，如果我从其中一个输入中切断验证，我的问题就会解决，但输入会再次丢失 CSS 错误类。如果我使用 jquery 组验证器，我会收到一条消息，但是当我有两个字段时，即两个字段的日期无效并且如上所述两条消息，第二条消息会覆盖第一条消息。

所以，这是我的问题，如果我只在一个字段中调用验证，是否有人知道如何将错误类放在另一个字段中，或者知道当消息用于由于两个输入而失败的验证时如何不重复消息？

4

0 回答 0