jQuery validation: how to output error message to jQuery UI modal dialog

Question

How can I change the error message of jQuery validation so when it validates the error is composed as bullet points inside a jQuery Ui modal dialog.

Tried this but it doesn't work as expected (i.e. the modal dialog only apperas once, but after it is closed, I can't bring the modal dialog back when submitting invalid data for second time).

Any tips will be appreciated. Thank you.

...
        $("#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>

Nick Craver · Accepted Answer · 2010-04-01 07:02:31Z

2

Change this line:

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

To this:

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

This will destroy/re-create the widget correctly, or alternatively...

Run this on document.ready:

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

And call just this in your validation, this way you're just opening the same dialog widget again:

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

answered Apr 1, 2010 at 7:02

Nick Craver

631k138 gold badges1.3k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user302307 Over a year ago

Hi Nick, thanks for the hints. It's working. Now, my other problem is the jQuery validation keeps appending validation error msg to the <div id="error-message"> area. And also it's keep updating the error msg as that's what the default behavior of jQuery validation (I believe). Is there a way for me to capture the error message just once and ignore the dynamic changes performed by jQuery validation. I only want to display the error msg every time user click submit. Again, many thanks.

brainondev · Accepted Answer · 2011-09-19 07:43:42Z

0

To use an on-submit validation only, add this options to your js code:

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

answered Sep 19, 2011 at 7:43

brainondev

1,1171 gold badge11 silver badges20 bronze badges

Collectives™ on Stack Overflow

jQuery validation: how to output error message to jQuery UI modal dialog

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related