Как использовать JQuery Validate для создания всплывающего окна со всеми ошибками формы при нажатии кнопки отправки? - PullRequest
Новая
       11

Как использовать JQuery Validate для создания всплывающего окна со всеми ошибками формы при нажатии кнопки отправки?

5 голосов
/ 17 июня 2010

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

function popupFormErrors(formId) {
  var validator = $(formId).validate();
  var message = '';
  for (var i = 0; i < validator.errorList.length - 1; i++) {
    message += validator.errorList[i].message + '\n';
  }

  if (message.length > 0) {
    alert(message);
  }
}

$('#btn-form-submit').click(function(){
  $('#form-register').submit(); 
  popupFormErrors('#btn-form-submit');
  return false;
});

$('#form-register').validate({
  errorPlacement: function(error, element) {/* no room on page */},
  highlight: function(element) { $(element).addClass('invalid-input'); },
  unhighlight: function(element) { $(element).removeClass('invalid-input'); },
  ...
});

Обновление Из информации в принятом ответе я придумал это. 

var submitClicked = false;

$('#btn-form-submit').click(function() {
  submitClicked = true;
  $('#form-register').submit();    
  return false;
});

$('#form-register').validate({
  errorPlacement: function(error, element) {/* no room on page */},
  highlight: function(element) { $(element).addClass('invalid-input'); },
  unhighlight: function(element) { $(element).removeClass('invalid-input'); },
  showErrors: function(errorsObj) {
    this.defaultShowErrors();
    if (submitClicked) {
      submitClicked = false;
      ... create popup from errorsObj...
    }
  }
  ...
});

1 Ответ

4 голосов
/ 17 июня 2010

Вы действительно должны использовать следующую опцию для проверки jQuery 

showErrors

здесь есть ссылка на документацию http://docs.jquery.com/Plugins/Validation/validate#options

...