jquery - Semantic UI - unobtrusively test form validity -

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

this jsfiddle illustrates problem: https://jsfiddle.net/annoyingmouse/3z1wfjel/

when first name field clicked automatically shows all errors on form - want errors show when a required field has been blurred rather showing errors result of testing using is valid.

anyone got ideas?

this not complete solution it's small step towards one.

use oninvalid , onvalid callbacks rather doing.

i've modified fiddle demonstrate.

the problem if, example, has valid until last element when want enable next button (because until it's blurred not valid or invalid).

right now, remainder of cannot solved semantic-ui because doesn't have "silent validate" option. see open issue: https://github.com/semantic-org/semantic-ui/issues/703. 1 option use library silent validation that's not ideal. contribute patch semantic-ui though.

if you're interested, think i've patched 2.1.8 is valid runs silently (now it's matter of making rid of invalid prompts). see the gist. (it's far perfect , if have time i'll submit pull request, search silent , you'll find changes)