Динамическая проверка формы jQuery для флажков

0

У меня есть форма, которая имеет несколько полей, и я использую плагин JQuery из jqueryvalidation.org для проверки. Все это отлично работает, кроме одной проблемы.

У меня есть checkbox массив в форме (скажем, это называется music_ideas), который имеет три варианта: рок, поп и джаз. Я запускаю страницу со всеми опциями, и у меня есть правило jQuery для проверки следующим образом:

'#music_ideas': {required: true, minlength: 2}

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

Любые идеи относительно того, где я могу ошибиться в этом?

С уважением, Джордж

РЕДАКТИРОВАТЬ: Ниже приведен минимальный рабочий пример:

   <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="example.css">
  <script src="jquery-1.11.0.min.js" type="text/javascript"></script>
  <script src="jquery.validate.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(document).ready(function(){
    $('#test_form').validate({
    success:"valid",
        rules: {
            'music_prefs[]': {
                required:true,
                minlength:2
                }
            },

        messages: {
            "music_prefs[]": {
                required: " You need to select a music idea",
                minlength: " You need to select at least two music ideas"
                }
            },
        errorPlacement: function(error, element) {
            if (element.attr("name") == 'music_prefs[]') {
                    element.parent().append(error);
                }
            else {
                error.insertAfter(element);
                }
        },
        });


        });
 </script>
</head>

<body>
<form id="test_form" action="#" method="post">
<div class="music_ideas"><label for="mi">Music Ideas:</label>
<input type="checkbox" name="music_prefs[]" id="mp1" checked value="Rock">Rock
<input type="checkbox" name="music_prefs[]" id="mp2" checked value="Pop">Pop
<input type="checkbox" name="music_prefs[]" id="mp3" checked value="Jazz">Jazz</div>
<input type="submit" name="btn_submit" value="Submit the form" id="bs">
<input type="reset" name="btn_reset" value="Clear Fields" id="br">
</form>
                </body>

</html>

Соответствующие строки из файла CSS:

label.error {
    background: url('unchecked.gif') no-repeat;
}
label.error.valid {
    background: url('checked.gif') no-repeat;
        }
  • 0
    Вам придется опубликовать больше вашего кода. В частности, куда вы звоните validate() и какие опции вы передаете? Можем ли мы увидеть вашу HTML-разметку?
  • 0
    Спасибо Джеймс, я отредактировал оригинальное сообщение, чтобы включить код, который вы просили.
Теги:
validation
checkbox

1 ответ

1

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

Однако вы можете снова принудительно $("#test_form").valid() проверку, вызвав $("#test_form").valid().

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

$("#test_form input[type='checkbox']").change(function() {
    $("#test_form").valid();
});

JSFiddle 1: http://jsfiddle.net/qW3az/

Или, если вы хотите, чтобы флажки отображались только после того, как пользователь впервые отправил форму:

$("#test_form").submit(function(e) {
    e.preventDefault();
    $("#test_form input[type='checkbox']").change(function() {
        $("#test_form").valid();
    });
});

JSFiddle 2: http://jsfiddle.net/Ydz5J/

Примечание: вы также можете вызвать $("#test_form").valid() в $(document).ready() чтобы немедленно показать этот флажок.

Поделиться
  • 0
    Супер, я попробую это. Поведение по умолчанию, хотя проверка работает динамически для всех элементов формы, и только флажки сняты (мне просто кажется, что я должен повторно отправить форму, прежде чем все снова начнет работать нормально)?
  • 0
    Поведение по умолчанию, кажется, работает хорошо для флажков, однако это success: "valid" опция success: "valid" которая не ведет себя так, как вы ожидаете. Если форма недействительна при первой ее отправке, она будет отслеживать и реагировать на ваши попытки ее исправить. Но по какой-то причине, если флажки действительны при первой отправке формы, он добавляет «действительный» класс и прекращает их мониторинг. Я согласен с вами, что это выглядит странной логикой, поэтому вы можете сообщить об этом автору плагина как об ошибке.

Ещё вопросы

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