Validation and Firefox's input caching

Question

When you refresh/reload a page or use the back button, Firefox is kind enough to repopulate your inputs with what was entered before you navigated away.

Though this is a nice feature it does not trigger my jquery validation and the unsaved changes warning I add to my pages.

Is there a way to either disable this feature in Firefox (without renaming every control every time) or capture the firefox events?

Answer 1

You can use the trigger() method to trigger any events (custom or not).

Suposing you have a validate event :

$(document).ready(function()
    {
        $('#yourform').trigger('validate');
    }
);

If your validation plugin makes use of a function to validate, then simply do :

$(document).ready(function()
    {
          validate($('#yourform'));
    }
);

which will be triggered when your document is ready.

Eventualy use setTimeout to avoid loading time during the way to browser load the cached input values.

Answer 2

Could I suggest you add a delayed function to validate and check for form content a few seconds after page load? That would probably be the safest way to catch all browsers, some of which only insert saved form data once the whole page has finished loading.

Answer 3

After your .validate() call in document.ready, also call .valid() once to trigger validation as well, like this:

$(function() {
  $('#myForm').validate({ /* options here */ });
  $('#myForm').valid();
});