Menu icon Foundation
Abide form error message removal

I can't tell if this is the expected behavior for Abide or if I have an error.

I'm working with Abide to validate a form and have a number of fields that are checked.  If the form is submitted and errors are found, the following HTML code displays an error message at the top and bottom of the page.

<div data-abide-error class="alert callout" style="display: none;">
<p><i class="fi-alert"></i> There are some errors in your form.</p>
</div>

However, when the user corrects all of the errors, that message stays visible (unlike the individual field error messages which disappear).  Is this how Abide is intended to function?  Is there a way to remove the form error message once all individual field errors have been corrected?

Thanks!

abideformsfoundation 6

I can't tell if this is the expected behavior for Abide or if I have an error.

I'm working with Abide to validate a form and have a number of fields that are checked.  If the form is submitted and errors are found, the following HTML code displays an error message at the top and bottom of the page.

<div data-abide-error class="alert callout" style="display: none;">
<p><i class="fi-alert"></i> There are some errors in your form.</p>
</div>

However, when the user corrects all of the errors, that message stays visible (unlike the individual field error messages which disappear).  Is this how Abide is intended to function?  Is there a way to remove the form error message once all individual field errors have been corrected?

Thanks!

Corey Schaaf over 3 years ago

Based on the example in the docs, the error message shows up if you try to submit and validation fails. If I correct all of the fields, the error message still stays even after I fix all the errors. 

I'm sure there's a way to hide that message with javascript, just not out of the box. 

Shoaib Iqbal over 3 years ago

There is an option to live validate it. 

data-live-validate="true"

You can put this small script to hide the message once it is validated.

$(document).on("valid.zf.abide", function(ev,elem) {
   $('.my-form .alert').hide();
});

Here is a CodePen example http://codepen.io/shoaibik/pen/YqgQyb

CHARK over 3 years ago

Thanks, Shoaib.  That script works well to hide the error message if there is only one field to validate. However, if there are more errors, the message hides when the first one is corrected, and stays gone if the field is later cleared.  I modified your codepen to try this: http://codepen.io/candi/pen/yOwvPO

I also tried modifying the script to the following:

$(document).on("formvalid.zf.abide", function(ev,elem) {
   $('.my-form .alert').hide();
});

since the docs indicate that is another available trigger, but that doesn't work at all. The message never hides in that case.

Shoaib Iqbal over 3 years ago

The trigger is called when form is submitted and not when the field is validated. I found another work around for this. It is to manually called the validate function when fields are changed.

 

$('input, textarea, select ').on("change.zf.abide", function(ev,elem) {
   $('.my-form').foundation("validateForm");
}); 

 

It will auto hide the error message, see the CodePen example.

http://codepen.io/shoaibik/pen/KzEoBZ

CHARK over 3 years ago

That works great! Thanks!

CHARK over 3 years ago

Actually one issue with that method is that as the user is completing the form, all of the error messages appear even before they get to the later fields. I modified your code to this:

    $('input, textarea, select ').on("change.zf.abide", function(ev,elem) {
        var invalid_fields = $('form').find('[data-invalid]');
        if (invalid_fields.length == 0)
            $('.alert.callout').addClass('hide');
        else
            $('.alert.callout').removeClass('hide');
    });

 

http://codepen.io/candi/pen/BKbVQb?editors=1010

Thanks for your help in getting this sorted out.