Кнопка отключения jQuery (НЕ отправлять), пока поле не будет проверено + Плагин валидации - PullRequest
7 голосов
/ 19 мая 2009

В моей форме 4 кнопки: кнопка «Отправить», «Отмена», «Добавить» и «Удалить». Все работают как положено, но я бы хотел отключить кнопку Добавить, пока поле ввода не подтвердится. Я использую плагин Validation и думаю, что это можно сделать с помощью обязательной проверки с обратным вызовом, но я не уверен.

Может ли кто-нибудь указать мне правильное направление?

UPDATE:

Вот идея некоторого кода

required: function(element) { 
   return($('#chargeamtaddButton').attr('disabled', ? '','disabled');
}

Ищем этот флажок true / false, чтобы установить отключенный атрибут

Ответы [ 4 ]

34 голосов
/ 20 мая 2011

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

Добавьте этот код к функции $(document).ready() на странице, на которой находится ваша форма.

$('#yourform').bind('change keyup', function() {
    if($(this).validate().checkForm()) {
        $('#submitbutton').removeClass('button_disabled').attr('disabled', false);
    } else {
        $('#submitbutton').addClass('button_disabled').attr('disabled', true);
    }
});

В этом случае он добавит класс button_disabled к кнопке, а затем добавит отключенный атрибут. Вы можете применить отключенный стиль к кнопке с помощью CSS.

1 голос
/ 19 мая 2009

Документация плагина jQuery Validate: Метод формы

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

Я не могу найти успешный обратный вызов для плагина проверки, поэтому я думаю, что вы застряли, используя метод submitHandler. Однако вы еще не готовы отправить форму, так как вы все еще хотите добавить поля. Поэтому мое предлагаемое решение - оставить кнопку «Добавить» постоянно включенной, но при ее нажатии вызывается функция, чтобы проверить, является ли форма действительной. Если это так, то добавьте свое поле или еще много чего, а если нет, то всплывают ошибки. Итак:

<body onload="formValidator = $('#form').validate();">
...
<input value='add' name='add' onclick='addIsValid();'>
...
<script type='text/javascript' language='javascript'>
function addIsValid() {
   if(formValidator.numberOfInvalids() > 0) {
          formValidator.showErrors();
      } else {
          addElementToFormOrWhatever();
      } 
   }
</script>

Или хотя бы что-то на этот счет. Удачи!

0 голосов
/ 05 июня 2014

Более элегантное и быстрое решение - просто переопределить стандартные события нажатия и нажатия клавиш, добавив необходимый код следующим образом, вместо добавления другого события прослушивания

$("#form").validate({
    submitHandler: function(form) {
        form.submit();
    },
    onkeyup: function( element, event ) {
        if ( event.which === 9 && this.elementValue(element) === "" ) {
            return;
        } else if ( element.name in this.submitted || element === this.lastElement ) {
            this.element(element);
        }

        if (this.checkForm()) { // checks form for validity
            $('a.submit').attr('class', 'submit btn btn-success');        // enables button
        } else {
            $('a.submit').attr('class', 'submit btn btn-danger disabled');   // disables button
        }
    },
    onclick: function( element ) {
        // click on selects, radiobuttons and checkboxes
        if ( element.name in this.submitted ) {
            this.element(element);

        // or option elements, check parent select in that case
        } else if ( element.parentNode.name in this.submitted ) {
            this.element(element.parentNode);
        }

        if (this.checkForm()) { // checks form for validity
            $('a.submit').attr('class', 'submit btn btn-success');        // enables button
        } else {
            $('a.submit').attr('class', 'submit btn btn-danger disabled');   // disables button
        }
    }
})

Со следующим кодом css для триггера отправки - изначально отключено (классы начальной загрузки 3):

<a onclick="if(!$(this).hasClass('disabled')) { $('#form').submit(); }" class="submit btn btn-danger disabled">button_save</a>

Это очень легко можно использовать с плагином jquery areYouSure , чтобы разрешить отправку только при внесении реальных изменений:

if (this.checkForm() && $('#form').hasClass('dirty')) { // checks form for validity

инициализация плагина с помощью без вывода сообщений:

$('#form').areYouSure( {'silent':true} );
0 голосов
/ 19 мая 2009

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

$(function() {
    $('#myForm').validate(
        rules: {
            'elementToWatch': {
                success: function(element) { 
                    if($("#myform").validate().element("#myselect")) {
                        $('#chargeamtaddButton:disabled').removeAttr('disabled');
                    } else {
                        $('#chargeamtaddButton').attr('disabled','disabled');
                    }
                },
                // etc...
             },
             // etc...
         },
         // etc...
     });
 });

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...