Menu icon Foundation
Disable abide form validation on blur the fields

Hi

That might be obvious but I can't find where do I control the fields validation is been triggered. Basically I want my form is been validated only after submit button is clicked. So I need to disable validation on immediate text entry and on user blurs the field. Perhaps I'm just missing something. Thanks for any ideas!

Hi

That might be obvious but I can't find where do I control the fields validation is been triggered. Basically I want my form is been validated only after submit button is clicked. So I need to disable validation on immediate text entry and on user blurs the field. Perhaps I'm just missing something. Thanks for any ideas!

formvalidationabide

Hi

That might be obvious but I can't find where do I control the fields validation is been triggered. Basically I want my form is been validated only after submit button is clicked. So I need to disable validation on immediate text entry and on user blurs the field. Perhaps I'm just missing something. Thanks for any ideas!

Hi

That might be obvious but I can't find where do I control the fields validation is been triggered. Basically I want my form is been validated only after submit button is clicked. So I need to disable validation on immediate text entry and on user blurs the field. Perhaps I'm just missing something. Thanks for any ideas!

AF over 5 years ago

I see an item in the configuration called "live_validate : true" that might be what you are looking for.

here: http://foundation.zurb.com/docs/components/abide.html

look under "Optional JavaScript Configuration" and "Custom Named Patterns"
I tried this but it didn't work:

 $(document).foundation().foundation('abide', {  live_validate : false }  );

Stan over 5 years ago

Thanks. I did jquery unbind "blur" event right after foundation initialisation and that did the trick so far. But still might need better solution.

herrreiprich about 5 years ago

Hi Stan,

I have the same problem. Do you have a better solution by now?

Patrick Biedert about 5 years ago

I don't know if this is still relevant, but I faced the same problem. To solve this, I just overwrite the abide blur and change event on the input, select and textarea elements after the foundation init:

     $('input, textarea, select').off('.abide').on('blur.fndtn.abide change.fndtn.abide', function (e) {
        // do nothing
     });

Ethan Hackett almost 5 years ago

I think I'm in the same boat. I have a nearly working version here's what i mean.

  1. We don't want to validate until after post. So no initial live validation.
  2. After post if there are invalid inputs, selects or text areas activate live validation.
 .find('div')
          .off('.abide')
          .on('blur.fndtn.abide change.fndtn.abide', 'input[data-invalid], textarea[data-invalid], select[data-invalid]', function (e) {
            self.validate([this], e);
          })
          .on('keydown.fndtn.abide', 'input[data-invalid], textarea[data-invalid], select[data-invalid]', function (e) {
            if (settings.live_validate === true) {
              clearTimeout(self.timer);
              self.timer = setTimeout(function () {
                self.validate([this], e);
              }.bind(this), settings.timeout);
            }
          });

around line 690 I changed the find() to look for a div which should wrap our inputs, selects and text areas. Then modify the on event to look for elements with the error attribute.

This fixes the issue where find doesn't track down inputs with dynamic data attributes applied after the dom is loaded.

The problem this creates is that after users click submit, live validation only works on inputs with errors. This means if the user went back and modified a previously valid input, they won't see an error message until they post again. It's not a prefect solution but it is a step in the right direction.

Validation Abide shouldn't be as simple as true or false but rather always, after, or never for greater validation control.