2

I am using abide alongside zurb foundation.

I am attempting to determine if I should disable the submit button of a form based on the valid status of the fields. In addition, I would like to make the fields as valid or otherwise.

Everything works during normal operations, but not until each field has been clicked out of or changed. Then and only then are the validators called. Due to this fact, I can't tell if the form is valid on page load.

On page load, I would like to call the validator to see if the fields are valid. I am using a combination of required, pattern and data-abide-validator.

zer00ne
  • 41,936
  • 6
  • 41
  • 68
stevemarvell
  • 981
  • 1
  • 6
  • 16

2 Answers2

0

You could try this:

$(document).ready(function() { 
    $("#myForm").trigger("change");
});

Replace #myForm with the ID of your form. This will trigger a change to the form which should make Abide go to work.

Source: Manually triggered Abide validation in Zurb Foundation

I also found this thread on Github that talks about putting an error class on the parent element of an input: Abide - force displaying of some errors on page load.

Community
  • 1
  • 1
Colin Marshall
  • 2,142
  • 2
  • 21
  • 31
0

On page load, I would like to call the validator to see if the fields are valid. I am using a combination of required, pattern and data-abide-validator.

This does not make sense to me, usually these fields are empty and not valid, or do you prefill the form fields?

If you just want to show the "error" state, this answer is already given by Colin Marshall (https://github.com/zurb/foundation/issues/4106)

MiPe
  • 1
  • 2