Как отключить проверку jquery при отмене?

Я использую модуль проверки правильности jQuery для проверки формы. Я вижу что-то странное с функциональностью отмены. У меня есть форма с одним полем электронной почты, кнопкой отправки и кнопкой отмены. Когда я ввожу неполный адрес в поле электронной почты, а затем, не щелкая нигде на странице, нажмите «Отмена», проверитель проверяет поле электронной почты, отображает недопустимое сообщение рядом с полем и убивает действие отмены.

Я нашел связанный с этим вопрос: плагин jQuery Validation: отключить проверку для указанные кнопки отправки . Это похоже на то, что мне нужно. Однако это не сработает! Я добавил «отменить» класс CSS для моей кнопки отмены, но у него не было никакого эффекта.

Этот пример кода демонстрирует проблему, которую я вижу. Я вижу поведение как в FF, так и в Chrome.

В этом примере, когда я ввожу неверный адрес электронной почты в текстовый ввод, а затем нажмите кнопку отмены, прежде чем нажимать что-либо еще, валидатор отображает сообщение рядом с текстовым вводом, и действие отмены никогда не происходит. Если я затем снова нажмите «Отменить», страница перезагрузится, как ожидалось. Это означает, что для того, чтобы отменить страницу, мне нужно дважды нажать «Отменить».

<script type="text/javascript">
    $(document).ready(function() {
        $("#myForm").validate()

        $(".cancel").click(function() {
            location.reload(true)
        })

    })
</script>

<div>
    <form name="myForm" id="myForm" action="index.html">
        <input type="text" class="required email" id="myField" name="myField"/>
        <input type="submit" value="Submit"/>
        <input type="submit" value="Cancel" class="cancel"/>
    </form>
</div>

Также интересно: я попытался запустить демонстрацию, найденную в документации по проверке jQuery ( http://docs .jquery.com/Плагины/проверки/ссылка # Skipping_validation_on_submit ). Когда я запускаю демо, я не могу сказать, работает ли проверка - поле электронной почты никогда не помечено как недопустимое, даже когда я вхожу в gobbledygook и нажимаю кнопку отправки. Все, что я когда-либо получал, - это простое оповещение, которое было добавлено в форму submitHandler. И кнопка отмены ведет себя одинаково, поэтому я не могу сказать, работает ли вообще класс отмены.

Я запускаю это как с FF, так и с Chrome. Я использую jQuery 1.9.1 и jquery-validate 1.11.4.

1
nl ja de
Если вы используете jquery.validate.unobtrusive (ASP.NET MVC), вам нужно будет немного поработать, потому что он закручивает поведение по умолчанию. См. Мой другой ответ на аналогичный вопрос.
добавлено автор Simon_Weaver, источник
@schufty, вы нашли решение. Я столкнулся с той же проблемой
добавлено автор cosset, источник

1 ответы

As per the accepted answer on the question you reference, adding a cancel class only "suppresses" the validation. As you can see in this demo, the cancel button behaves exactly like another submit button, except that the validation is bypassed. Please describe exactly what you want to see happen when the cancel button is clicked.

Otherwise, maybe this is what you want: http://jsfiddle.net/25XBT/

jQuery:

$(document).ready(function() {

    var validate = $('#myform').validate({
       //your rules & options
    });

    $('#cancel').on('click', function (e) {
        e.preventDefault();
        validate.resetForm();
        $('form').get(0).reset();
    });

});

HTML:

<form id="myform">
    <input type="text" name="myfield" />
    <input type="submit" />
    <input type="submit" id="cancel" class="cancel" value="cancel" />
</form>

See: http://docs.jquery.com/Plugins/Validation/Validator/resetForm

EDIT: class="cancel" has since been deprecated in favor of the formnovalidate attribute.

<input type="submit" id="cancel" formnovalidate="formnovalidate" value="cancel" />
7
добавлено
@schufty, я оставил
из моего ответа, потому что он должен быть абсолютно неуместным и лишним для функционирования этого JavaScript. Кроме того, я замечаю, что jsFiddle, с которым я связан, в моем ответе не был правильным jsFiddle, на который я намеревался ссылаться. Я исправил свою ссылку сейчас.
добавлено автор Sparky, источник
Я вижу только одно существенное различие между вашей скрипкой и моим примером: вы включаете e.preventDefault() в обработчик кликов. Однако, когда я запускаю свой образец, он даже не попадает в обработчик кликов при первом щелчке. Поэтому я искал другие различия, и, оказывается, ключевое различие между вашим кодом и моим - это hard break , который вы вставили между кнопками submit и cancel в своей скрипке (по какой-то причине вы не включили это в вашем ответе). Когда я включаю жесткий перерыв в моем коде, он работает! Когда я его вынимаю, он снова сломается. Я не могу представить, почему это имеет значение.
добавлено автор schufty, источник
Я обновил вашу скрипту, чтобы показать, что происходит, когда жесткий перерыв удаляется. Обновленная скрипка находится здесь: jsfiddle.net/47XV9 . Обратите внимание, что вы получаете точное поведение, описанное в моем первоначальном вопросе.
добавлено автор schufty, источник
Верстка сайтов HTML/CSS/JS/PHP
Верстка сайтов HTML/CSS/JS/PHP
3 439 участник(ов)

Правила группы: напишите !rules в чате. Группа Вк: vk.com/web_structure Freelancer: @web_fl Веб Дизайн: @dev_design Маркетолог: @topmarkening Автор: @M_Boroda