Semantic UI - unobtrusively test form validity

Question

I have multiple form classed divs in my page and I'd like to know if there's a method that I can use to unobtrusively test the validity of each form? Each div with the class of form has a button (with the class of ok) which allows the user to continue through the form divs. I'd like to disable that button on page load to ensure that all relevant data is collected from the forms, and only when the form is valid allow progression. I've tried adding a function to each form elements change which calls semantic's is valid but that highlights each and every validity issue.

This JSFiddle illustrates my problem: https://jsfiddle.net/annoyingmouse/3z1wfjeL/

When the First Name field is clicked into it automatically shows all errors on the form - I want the errors to only show when a required field has been blurred rather than showing all errors as a result of testing using is valid.

Anyone got any ideas?

Answer 1

This is not a complete solution but it's a small step towards one.

Use the onInvalid and onValid callbacks rather than what you are currently doing.

I've modified your fiddle to demonstrate.

The problem now is if, for example, someone has everything valid up until the last element when you want to enable the next button (because until it's blurred it will not be valid or invalid).

Right now, the remainder of this cannot be solved with semantic-ui because it doesn't have a "silent validate" option. See this open issue: https://github.com/Semantic-Org/Semantic-UI/issues/703. One option would be to use another library to do silent validation but that's really not ideal. You could also contribute a patch to semantic-ui though.

If you're interested, I think I've patched 2.1.8 so that is valid runs silently (now it's just a matter of making it get rid of the invalid prompts). See the gist. (it's far from perfect and if I have time I'll submit a pull request, search for silent and you'll find my changes)