Проверка JQuery - Как создать метод, используя два или более полей?

0

У меня есть несколько начальных и конечных дат в моей системе, в некоторых случаях у меня есть несколько начальных и конечных дат на экране. Все они сгруппированы в два набора и имеют одинаковое поведение: дата начала не может быть больше даты окончания, а разница между ними не может превышать введенный пользователем ввод.

Я знаю, что мне нужно создать два метода: один для проверки первого и второго для второго случая. Проблема в том, что я не знаю, как ссылаться на поля, например:

// 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;
});

Проблема заключается в следующем: таким образом я жестко закодировал имена ввода. Это будет работать, если у меня будет только один набор дат на экран, но когда у меня будет более одного, это не сработает. Как создать метод без жесткого кодирования идентификаторов элементов, которые я хочу использовать, чтобы использовать его по всей системе?

Я прочитал онлайн-документацию в http://jqueryvalidation.org/jQuery.validator.addMethod/, но, похоже, справляется с моей проблемой, и я думаю, что использование групп будет недостаточным для обработки всех элементов, мне, вероятно, придется скопировать /paste для каждого набора дат.

Я считаю, что если вы поможете мне в одном из случаев, второй будет разрешен с использованием той же логики.

EDIT: в соответствии с запросом, здесь HTML

<table width="95%" id="tabela_interna">
    <thead><tr valign="middle"><th colspan="6">Relat&oacute;rio Interna&ccedil;&otilde;es Concierge</th></tr></thead>
    <tbody>
        <tr valign="middle">
            <td width="11%" align="left" class="td_label"><label for="dataInicialSolicitacao">Data Solicita&ccedil;&atilde;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"/>

            </td>
            <td width="11%" align="left" class="td_label"><label for="dataFinalSolicitacao">Data Solicita&ccedil;&atilde;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"/>

            </td>
        </tr>
        <tr valign="middle">
            <td width="11%" align="left" class="td_label"><label for="dataInicialLiberacao">Data Libera&ccedil;&atilde;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"/>

            </td>
            <td width="11%" align="left" class="td_label"><label for="dataFinalLiberacao">Data Libera&ccedil;&atilde;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"/>

            </td>
        </tr>
        <tr valign="middle">
            <td width="11%" align="left" class="td_label"><label for="dataInicialInternacao">Data Interna&ccedil;&atilde;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"/>
            </td>
            <td width="11%" align="left" class="td_label"><label for="dataFinalInternacao">Data Interna&ccedil;&atilde;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"/>
            </td>
        </tr>
</table>
  • 0
    Метод equalTo() передает селектор в качестве опции. Попробуйте подобный подход.
  • 0
    Не могли бы вы предоставить ссылку на не минимизированную версию плагина? Я не могу найти его даже на странице gitHub.
Показать ещё 6 комментариев
Теги:
jquery-validate

2 ответа

1
Лучший ответ

Я использовал подход, предложенный Blazemonger, и создал метод, основанный на equalTo.

$.validator.addMethod("startDateCantBeGreaterThanEndDate", function(value, element, param) {
        var target = $(param);
        if (this.settings.onfocusout) {
            target.unbind(".validate-startDateCantBeGreaterThanEndDate").bind("blur.validate-startDateCantBeGreaterThanEndDate", function() { $(element).valid(); });
        }
        value > target.val();
    });

И использовал метод таким же образом equalTo:

$("form").validate({
        rules: {
            "filtro.dataInicialSolicitacao": { startDateCantBeGreaterThanEndDate: "#dataFinalSolicitacao" },
        },
        messages: {
            "filtro.dataInicialSolicitacao": { startDateCantBeGreaterThanEndDate: "Type your custom message." },
        }
});
Поделиться
1

Я обычно делаю это с использованием пользовательских атрибутов, например:

<input type="text" id="x" data-validate-date="true" data-validate-against="y" value="01/01/2000" />
<input type="text" id="y" value="1/1/2001" />
<input type="text" id="a" data-validate-date="true" data-validate-against="b" value="01/01/2000" />
<input type="text" id="b" value="4/4/2020" />

Затем вы можете определить свое правило валидации:

$.validator.addMethod("dateRange", function() {
    var allValid = true;
    var results = [];
    var datesToValidate = $("[data-validate-date]");

    for(var i = 0; i < datesToValidate.length; i++) {
        var d = datesToValidate[i];
        var startDate = $(d).val();
        var endDateSelector = "#" + $(d).attr("data-validate-against");
        var endDate = $(endDateSelector).val();
        results[i] = isDate(startDate) && isDate(endDate) && (Date.parse(startDate) <= Date.parse(endDate));
    }

    for(var j = 0; j < datesToValidate.length; j++) {
        if(!(results[j] == true)) {
          allValid = false;
        }
    }
    return allValid;  
});

Я не знаю, если это лучший способ сделать это, но я думаю, что это может сработать для вас.

Поделиться
  • 0
    Извините за ужасное форматирование. Пишу на свой телефон и немного борюсь!
  • 0
    Нет проблем с форматированием. Как вы инициируете это в правилах?
Показать ещё 7 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню