Кнопка отключения jQuery (НЕ ПОДКЛЮЧИТЬ), пока поле не проверит + плагин Validation

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

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

ОБНОВИТЬ:

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

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

Поиск этого флажка опции true / false для установки отключенного атрибута

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

 $(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, я могу помочь вам больше.

Я действительно нашел лучший способ сделать это, и он использует недокументированный метод 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.

jQuery Подтвердить документацию плагина: метод формы

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

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

  ...  ...  

Или, по крайней мере, что-то в этом роде. Удачи!

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

 $("#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 для триггера отправки – первоначально отключенного (bootstrap 3 classа):

 button_save 

Это очень легко использовать с подключаемым модулем jquery – это разрешить только включение отправки при внесении фактических изменений:

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

инициализация подключаемого модуля с помощью тишины:

 $('#form').areYouSure( {'silent':true} ); 
  • Вызов функции jQuery после завершения .each ()
  • Может ли функция onprogress быть добавлена ​​в jQuery.ajax () с помощью xhrFields?
  • MVC 3 - Html.EditorFor, похоже, кэширует старые значения после вызова $ .ajax
  • Невозможно установить атрибут данных с помощью jQuery Data () API
  • Итерирование атрибутов элементов с помощью jQuery
  • Как я могу определить, возвращает ли селектор null?
  • попросите разрешение на геолокацию снова, если оно было отклонено
  • jQuery переключить CSS?
  • Определите, будет ли пользователь щелкать полосу прокрутки или содержимое (onclick для собственной полосы прокрутки)
  • проверка нескольких текстовых полей с одинаковым именем с помощью jquery validator проверяет только первый ввод
  • Найти все элементы на основе ids с помощью regex в селекторе jQuery
  • Давайте будем гением компьютера.