Arhn - архитектура программирования

Плагин проверки jQuery слишком рано показывает сообщение проверки

У меня есть форма поиска, в которой отображаются разные группы флажков в зависимости от того, что пользователь выбирает в раскрывающемся списке. Я хочу использовать плагин проверки jQuery, чтобы проверить, что пользователь (а) выбрал что-то в раскрывающемся списке и (б) установил хотя бы один флажок.

Я заставил это работать, за исключением того, что сообщение проверки для флажков ведет себя странно. Пользователь может без проблем выбрать значение в раскрывающемся списке, но когда пользователь щелкает что-либо на странице (даже пустую область), отображается сообщение об ошибке проверки для флажков. Кто-нибудь знает, что может быть причиной этого?

Вот мой JS-код для плагина проверки. Я решил, чтобы все сообщения проверки отображались рядом с раскрывающимся списком (с именем = 'to'), а не рядом с флажками (все они имеют класс = 'from_checkbox').

$(document).ready(function(){
    // Method for verifying that at least one checkbox has been checked
    jQuery.validator.addMethod("atLeastOneChecked", function(value, element, params) { 
        return $('.from_checkbox:checked').length > 0; 
    }, jQuery.format("From?"));

    // Tell jQuery validation plugin to validate the search form with the proper rules
    $("#search_form").validate({
        rules: {
            'to': { 
                required: true, 
                atLeastOneChecked: true
            }
        }, 
        messages: {
            'to': {
                required: "To?"
            }
        }
    });
});

Большая часть html генерируется php, но вывод выглядит примерно так:

<form action="results.php" method="post" id="search_form">
    <table>
        <tr>
            <td>Destination</td>
            <td>
                <select name="to" onchange='changeFromDiv(options[selectedIndex].value)'>
                    <option disabled="disabled" selected value="">--select--</option>
                    <option value="1">Country 1</option>
                    <option value="2">Country 2</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2" id="from_label">Which cities can you travel from?</td> 
        </tr>
        <tr>
            <td colspan="2">
                <div style="display:none" class="from_div" id="from_1">
                    <input name="from[3]" type="checkbox" value="3" class="from_checkbox" /> City 3<br />
                    <input name="from[4]" type="checkbox" value="4" class="from_checkbox" /> City 4<br />
                    <input name="from[8]" type="checkbox" value="8" class="from_checkbox" /> City 8<br />
                </div>
                <div style="display:none" class="from_div" id="from_2">
                    <input name="from[1]" type="checkbox" value="1" class="from_checkbox" /> City 1<br />
                    <input name="from[6]" type="checkbox" value="6" class="from_checkbox" /> City 6<br />
                </div>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="submit" id="submit_button" value="Find best route" onclick="showLoading()" />
            </td>
        </tr>
    </table>
</form>

  • Просто отредактировал вопрос, чтобы включить html. Если вы хотите увидеть какой-либо другой код (например, JS для отображения и скрытия div с флажками), просто дайте мне знать, и я включу его. 21.05.2011
  • Плагин проверки обычно проверяет поля, когда они теряют фокус, верно? То есть, когда вы щелкаете в любом другом месте страницы, именно так, как вы описываете. Держу пари, работает как задумано. 21.05.2011
  • Ооо! Я этого не понимал. Знаете ли вы, есть ли способ заставить его ждать, пока пользователь не нажмет кнопку отправки? 21.05.2011
  • Смотрите мой ответ - я думаю, это все, что вам нужно сделать. 21.05.2011

Ответы:


1

Когда вы инициализируете плагин, просто включите параметр «onfocusout»:

$("#search_form").validate({
    rules: {
        'to': { 
            required: true, 
            atLeastOneChecked: true
        }
    }, 
    messages: {
        'to': {
            required: "To?"
        }
    },
    onfocusout: false
});

Это укажет плагину не выполнять проверки событий «размытия» от задействованных элементов. Он будет ждать, пока форма не будет отправлена. Также есть флаг «onkeyup», который, вероятно, не имеет отношения к вам, поскольку вы не работаете с вводом текста.

21.05.2011
  • Рад, что проснулся достаточно, чтобы помочь! 21.05.2011
  • Новые материалы

    Коллекции публикаций по глубокому обучению
    Последние пару месяцев я создавал коллекции последних академических публикаций по различным подполям глубокого обучения в моем блоге https://amundtveit.com - эта публикация дает обзор 25..

    Представляем: Pepita
    Фреймворк JavaScript с открытым исходным кодом Я знаю, что недостатка в фреймворках JavaScript нет. Но я просто не мог остановиться. Я хотел написать что-то сам, со своими собственными..

    Советы по коду Laravel #2
    1-) Найти // You can specify the columns you need // in when you use the find method on a model User::find(‘id’, [‘email’,’name’]); // You can increment or decrement // a field in..

    Работа с временными рядами спутниковых изображений, часть 3 (аналитика данных)
    Анализ временных рядов спутниковых изображений для данных наблюдений за большой Землей (arXiv) Автор: Рольф Симоэс , Жильберто Камара , Жильберто Кейрос , Фелипе Соуза , Педро Р. Андраде ,..

    3 способа решить квадратное уравнение (3-й мой любимый) -
    1. Методом факторизации — 2. Используя квадратичную формулу — 3. Заполнив квадрат — Давайте поймем это, решив это простое уравнение: Мы пытаемся сделать LHS,..

    Создание VR-миров с A-Frame
    Виртуальная реальность (и дополненная реальность) стали главными модными терминами в образовательных технологиях. С недорогими VR-гарнитурами, такими как Google Cardboard , и использованием..

    Демистификация рекурсии
    КОДЕКС Демистификация рекурсии Упрощенная концепция ошеломляющей О чем весь этот шум? Рекурсия, кажется, единственная тема, от которой у каждого начинающего студента-информатика..