jQuery Stop validation on cancel ui dialog

Question

I have several forms with separate validators defined. These all work fine and validates as expected. However if I click the cancel button in the dialog box it still validates the form and shows errors. I have to click the cancel button twice for the form to close. If I click the [x] to close the dialog I briefly see the error message but the form closes. I can live with that.

This is my code:

var renewValidator = $("#FormRenew").validate({
  rules: {
    NewNo: {
      remote: {
        url: "action.php?checkDup=1"
      }
    }
  }
});

$("#dialog").dialog({
  bgiframe: true,
  autoOpen: false,
  width: 450,
  modal: true,
  buttons: {
    'Renew': function() {
      if (renewValidator.valid()) {
        $.ajax({
          type: "POST",
          url: "ajax.php",
          data: queryString,
          success: function(msg) {...
                                 }
                                 });
          $(this).dialog('close');
        }
               },
               Cancel: {
               text: 'Cancel',
               immediate: "true",
               formnovalidate: 'formnovalidate',
               class: 'cancel',
               click: function(e) {
          console.log('Cancel clicked!');
          e.preventDefault();
          $("form").validate().cancelSubmit = true;
          $(this).dialog('close');
        }
      }
    },
    beforeClose: function() {
      renewValidator.resetForm();
      $("#FormRenew").trigger("reset");
    }
  });

Initially I just had a simple cancel like this Cancel:

function() {
    $(this).dialog('close');
}

But I added the various options as suggested in other posts. None works for me.

Did you inspect your DOM to verify that `formnovalidate="formnovalidate"` is part of the cancel button's HTML markup? This is all that matters. If not, then you have a problem with jQuery UI. — Sparky, Dec 15 '16 at 18:12
@Sparky - Here is a jsFiddle demo showing the problem. [https://jsfiddle.net/3ob9dhxj/](https://jsfiddle.net/3ob9dhxj/) — Kirsten, Dec 16 '16 at 12:06
The buttons are `type="button"` so there would be no need to try to block validation on click because it shouldn't be happening in the first place. In other words, with `type="button"`, you **must** programmatically trigger the validation. However, with your example, I cannot see where validation is being triggered. It's the weirdest thing. — Sparky, Dec 16 '16 at 16:02
var renewValidator = $("#FormRenew").validate(...) sets up the validation. When the input looses focus by clicking the cancel button the validation is triggered. But why would I have to click cancel twice? If you click the close button it closes straight away as expected. — Kirsten, Dec 16 '16 at 16:26
Still do not have a fix. However, the buttons have absolutely nothing to do with this. [**Simply clicking anywhere on the page triggers validation!**](https://jsfiddle.net/g3cLhz2e/) Now the mystery to solve is "why?", as I see no click handlers that would cause this. — Sparky, Dec 16 '16 at 16:54

Sparky · Accepted Answer · 2016-12-16T17:30:24.217

1

The buttons have absolutely nothing to do with this. Validation is triggered when you focus out of the field. Since the modal opens with the field in focus, simply clicking anywhere on the page causes a focusout event to fire and therefore triggers validation.

Setting the onfocusout option to false within .validate() is part of the solution. However, as explained in my comments, you cannot trigger validation at all with any button because they are outside the form tags (and not type="submit").
Change your renewValidator.valid() into $("form").valid() so validation can be programmatically triggered when Renew is clicked.

IMPORTANT: Since your buttons are outside the <form>, you can also remove all that special "button canceling" code. A button cannot submit or trigger validation when it's outside the form container or when it's type="button".

DEMO: jsfiddle.net/yggg588c/

edited Dec 16 '16 at 17:30

answered Dec 16 '16 at 17:11

Sparky

98,165
25
199
285

unfortunately I've tried that already and although the minlength validition rule still works the remote does not. It triggers the call to the remote but even when that returns false it passes the $("form").valid() check :-( I don't know how to mimic the ajax remote call on jsFiddle to show you – Kirsten Dec 16 '16 at 23:00
@Kirsten, that has nothing to do with the original question, which I solved. Please post your troubles with `remote` as a new question. Thanks. – Sparky Dec 17 '16 at 01:13
I have a remote in the question. I think I have found a way to simulate the remote call. It should returm false and my remote call returns false but on alerting the value it says true and the form is submitted. here is the updated jsFiddle [http://jsfiddle.net/yggg588c/1/](http://jsfiddle.net/yggg588c/1/) – Kirsten Dec 17 '16 at 07:08
@Kirsten, you mentioned absolutely nothing in the original question about `remote`. The entire narrative was about the cancel button being broken, which I kindly solved for you after a great amount of effort. Now if you have another question, please post a new question. Otherwise, the original question about the broken cancel button has been fully explained and solved. – Sparky Dec 17 '16 at 08:21
The problem seems to be that the valid check returns true before the check has completed. I think I have found a solution. Adding async: true to the remote rule seems to do the trick. I found the answer here [http://stackoverflow.com/a/12981049/7302483](http://stackoverflow.com/a/12981049/7302483) Here is the updated jsFiddle [http://jsfiddle.net/yggg588c/2/](http://jsfiddle.net/yggg588c/2/) – Kirsten Dec 17 '16 at 13:22
Thanks for all your help. The problem now appears to be solved. – Kirsten Dec 17 '16 at 13:25

jQuery Stop validation on cancel ui dialog

1 Answers1