Question

In my app I’ve got multiple tabs. In tabs I’ve got input fields and I want to validate these fields in client side. For this I try to use HTML5 attributes, for example required attribute or pattern attribute. In case when I’ve got empty field (field is required) in first tab which is selected, the error message appears The field is required, but when I’ve got empty field in other tab for example in third tab and my first tab is selected, the error message does not appears.

Question
Is there way to organize validation with HTML5 in this situation ?

Answer 1

Are you hiding form elements with display: none? If your elements are not visible they will not trigger the validation UI:

Report the problems with the constraints of at least one of the
elements given in unhandled invalid controls to the user. User agents
may focus one of those elements in the process, by running the
focusing steps for that element, and may change the scrolling position
of the document, or perform some other action that brings the element
to the user’s attention. User agents may report more than one
constraint violation. User agents may coalesce related constraint
violation reports if appropriate (e.g. if multiple radio buttons in a
group are marked as required, only one error need be reported). If one
of the controls is not being rendered (e.g. it has the hidden
attribute set) then user agents may report a script error.

In this situation you will have to listen to the invalid event with your own script and perform a suitable action.