Question

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

$(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组验证器，我会得到一条消息，但是当我有这样的消息时，即两个字段都有无效日期并且如上面解释的那样两条消息时，第二条消息会覆盖第一条消息。

所以，这是我的问题，如果我只在一个字段中调用验证，或者知道如果消息因为验证失败而无法复制消息，那么是否有人知道如何将错误类放在其他字段中两个输入？

JQuery Validation插件验证时必须分组和取消分组的字段

0 个答案: