代码之家  ›  专栏  ›  技术社区  ›  Lawrence Barsanti

如何使用jqueryvalidate在单击submit按钮时创建一个带有所有表单错误的弹出窗口?

  •  5
  • Lawrence Barsanti  · 技术社区  · 14 年前

    我使用JQuery验证插件进行客户端表单验证。除了在无效表单字段上使用丰富多彩的样式之外,我的客户机还要求显示弹出消息。我只想在单击提交按钮时显示此消息,否则会让用户发疯。我尝试了以下代码,但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 回复  |  直到 14 年前
        1
  •  4
  •   John Hartsock    14 年前

    您应该认真考虑使用以下选项进行jQuery验证

    showErrors
    

    这里是文档的链接 http://docs.jquery.com/Plugins/Validation/validate#options