Menu icon Foundation
Disable Abide For a specific Submit Button

Hello.
How would you disable abide On a form submit

i have 2 buttons

one for CONTINUE and one for SAVE
when clicking CONTINUE i would like to let abide do its function, but when SAVE is CLICKED abide will not do its validation. Are there event handlers for this?

            

$('#check-form-submit-resume input[type=submit]#save-enrollment').on('click',function(){
    $('#check-form-submit-resume').removeProp('data-abide');
	$('#check-form-submit-resume').removeAttr('data-abide');
	$('#check-form-submit-resume').off('invalid');
    // need to remove foundation validation
	// $('#check-form-submit-resume').off('Foundation.libs.abide');
});

abideform

Hello.
How would you disable abide On a form submit

i have 2 buttons

one for CONTINUE and one for SAVE
when clicking CONTINUE i would like to let abide do its function, but when SAVE is CLICKED abide will not do its validation. Are there event handlers for this?

            

$('#check-form-submit-resume input[type=submit]#save-enrollment').on('click',function(){
    $('#check-form-submit-resume').removeProp('data-abide');
	$('#check-form-submit-resume').removeAttr('data-abide');
	$('#check-form-submit-resume').off('invalid');
    // need to remove foundation validation
	// $('#check-form-submit-resume').off('Foundation.libs.abide');
});
AF over 5 years ago

I am dealing with the same problem. I need to be able to disable validation (abide) on the fly for a the whole form or a few fields.

Removing "data-abide" attribute does not seem to help.

Nikkitune over 5 years ago

I needed to do the same thing. This is what I did:
I don't really know if any of this is redundant... But it works. So im happy! :) Hopefully it works for you guys as well.

         $('#cancel').click(function(){
            $('input, div, form').removeAttr('data-invalid'); 
            $('input, div, form').removeAttr('required');             
            $('input, div, form').removeClass('error');
        });

Halvor Haugan over 5 years ago

I think you only need to remove the "required" attribute. I did it like tihis:

$('[required]').attr('required', false);

But there should have been a better way to do this...

David Kavanagh about 5 years ago

The problem with any of this is that if you rely on abide for normal submit validation, you can't turn it off. Yet if you want to not have validation when clicking a "cancel" link, the click listener won't get called because abide handles a focus change event and swallows the click event. I have to click twice on cancel.. the first time abide errors appear on required fields, the 2nd time, cancel is actually clicked.

David Kavanagh about 5 years ago

I spent some time on this yesterday. To preface, I have a form with a save and a cancel button. Validation is fine when the user hits the save button. The problem comes with the cancel button if the form doesn't pass validation. The cancel button click is swallowed because the blur listener on the field being validated returns false. To get around that, I rigged up something so that if my form defines "cancel-target" as an attribute, that cancel-target (a selector) triggers different behavior. If the attribute is set, normal validation on blur is turned off and the blur target is saved. The other part of this is that validation is turned on in a focus listener for every other element under the form. That allows validation if the user changes focus except when the target specified in the "cancel-target" is clicked. Here's the code diff for foundation.abide.js

index 9898eac..44eab0e 100644
--- a/eucaconsole/static/js/thirdparty/foundation/foundation.abide.js
+++ b/eucaconsole/static/js/thirdparty/foundation/foundation.abide.js
@@ -53,7 +53,8 @@
events : function (scope) {
var self = this,
form = $(scope).attr('novalidate', 'novalidate'),
- settings = form.data('abide-init');
+ settings = form.data('abide-init'),
+ cancel_target = form.attr('cancel-target');

   form
     .off('.abide')

@@ -63,9 +64,17 @@
})
.find('input, textarea, select')
.off('.abide')
- .on('blur.fndtn.abide change.fndtn.abide', function (e) {
+ .on('change.fndtn.abide', function (e) {
self.validate([this], e);
})
+ .on('blur.fndtn.abide', function (e) {
+ if (cancel_target !== undefined) {
+ self.blur_target = this;
+ }
+ else {
+ self.validate([this], e);
+ }
+ })
.on('keydown.fndtn.abide', function (e) {
var settings = $(this).closest('form').data('abide-init');
clearTimeout(self.timer);
@@ -73,6 +82,11 @@
self.validate([this], e);
}.bind(this), settings.timeout);
});
+ if (cancel_target) {
+ form.find(':not('+cancel_target+')').on('focus.fndtn.abide', function (e) {
+ self.validate([self.blur_target], e);
+ })
+ }
},

 validate : function (els, e, is_ajax) {

I can't promise this is completely free from errors, but it satisfies my case. I've also put it into a gist to facilitate more interaction and comments: https://gist.github.com/dkavanagh/32874d28420cabc90816

David Kavanagh almost 5 years ago

Anyone from Zurb care to look at the patch I put on the gist? It is something we really need to address and I'd really prefer to work with you guys to get something like this into the package vs having to maintain it on my own.

Rafi Benkual over 4 years ago

David,
I'll have one of the JS quys take a look here. I think that You should submit the Pull Request to Foundation so we can add it in!

David Kavanagh over 4 years ago

I looked over the current abide code and it looks like this may have been addressed differently. So, I tested it with my application and so far, so good! Looks like my patch won't be needed after all! We just need to wait for our next release cycle and pick up current foundation code.

michael febrianto about 3 years ago

Hi guys,

I recently have to faced this kind of issue too.

My solution probably only works for form with limited number of inputs, such as login form.

Here is the solution :

$('#login').focusout(function() {
        $('input, textarea, select').off('.abide');

        $("#password").focus(function(){
          console.log("focus out password");
          $('input, textarea, select').on('.abide');
          Foundation.libs.abide.validate($('form').find('#login'), {type:''})
        })

      });

      $("#password").focusout(function() {
        $('input, textarea, select').on('.abide');
        Foundation.libs.abide.validate($('form').find('#password'), {type:''})
      });

Let me know what you think about it.

Basically general knowledge that I got is focusout is called before blur.fndtn.abide so we can overwrite behaviour of blur.fndtn.abide by using focusout.

God Bless,

Michael Febrianto.