Menu icon Foundation

My Posts

  • 8
    Replies
  • Sticky Magellan with XY-grid?

    By CHARK

    Magellanxy-gridsticky

    I'm having trouble getting magellan to work with the XY grid.  I've put together a pen from the Zurb XY pen and the code from the magellan page (https://foundation.zurb.com/sites/docs/magellan.html), but no component of it works. Not only is the top ... (continued)

    Last Reply by Jindo over 1 year ago


  • 6
    Replies
  • Abide form error message removal

    By CHARK

    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 a... (continued)

    Last Reply by CHARK over 3 years ago


My Comments

CHARK commented on CHARK's post over 3 years

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.

CHARK commented on CHARK's post over 3 years

That works great! Thanks!

CHARK commented on CHARK's post over 3 years

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.

Posts Followed

No Content

Following

    No Content

Followers

My Posts


My Comments

You commented on CHARK's post over 3 years

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.

You commented on CHARK's post over 3 years

That works great! Thanks!

You commented on CHARK's post over 3 years

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.

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content