jQuery验证:如何将错误消息输出到jQuery UI模式对话框

时间:2010-04-01 05:26:20

标签: jquery jquery-ui

如何更改jQuery验证的错误消息,以便在验证时将错误组成jQuery Ui模式对话框中的项目符号。

尝试了这个但它没有按预期工作(即模态对话框只出现一次,但在关闭后,我无法在第二次提交无效数据时返回模态对话框。)

任何提示将不胜感激。谢谢。

...
        $("#myform").validate({
          debug: true,
          errorPlacement: function(error, element) {
            error.prependTo('#dialog-message');
          },
          errorLabelContainer: $("dialog-message ul"),
          onblur: false,
          onkeyup: false,
          onsubmit: true,
          wrapper: "li",
          showErrors: function() {
            //$("#dialog").dialog("destroy");
            $("#dialog-message").dialog({
              modal: true,
              buttons: {
                Ok: function() {
                  $(this).dialog('close');
                }
              }
            });
            this.defaultShowErrors();
          }
        });
...

      <div id="dialog-message" title="Download complete">
        <p>test</p>
      </div>

2 个答案:

答案 0 :(得分:2)

更改此行:

$("#dialog-message").dialog({

对此:

$("#dialog-message").dialag('destroy').dialog({

这将正确地破坏/重新创建小部件,或者......

在document.ready上运行:

$(function() {
  $("#dialog-message").dialog({
     modal: true,
     autoOpen: false,
     buttons: { Ok: function() {
         $(this).dialog('close');
       }
     }
  });
});

在您的验证中调用此方法,这样您只需再次打开相同的对话框小部件:

      showErrors: function() {
        $("#dialog-message").dialog('open');
        this.defaultShowErrors();
      }

答案 1 :(得分:0)

要仅使用提交验证,请将此选项添加到您的js代码中:

jQuery("#myForm").validate({
            ...
            onfocusout: false,
            onkeyup: false,
            onclick: false,
            ....