0

In my form, the user can toggle the visibility of certain form elements using Knockout in order to save space. If the elements are visible and the user has not filled out the required fields, when they press the save button, HTML5 will notify the user of the required fields. However, when the elements are hidden, the save silently fails in that pressing the button does nothing.

The only indication to the user that something is wrong is that the save button does not respond. Of course in the console it has the familiar message 'An invalid form control is not focusable'.

Have you dealt this with issue before? How did you address it? I don't want to take away the required attribute. I suppose that one solution could be to validate with JavaScript for those types of fields instead of HTML5. Suggestions are appreciated.

Similar question:

Community
  • 1
  • 1
Marcel Gruber
  • 6,668
  • 6
  • 34
  • 60
  • There's a few different ways you could do it. You can use [jQuery Validation](http://jqueryvalidation.org/), or on the [Knockout Documentation](http://knockoutjs.com/documentation/extenders.html) they discuss monitoring the state of an input (however they aren't using `required>` ), or before you call your save function you can use jQuery to check all `:hidden` inputs/divs, etc, and check their `val()` or `text()` – Mark C. Apr 23 '15 at 15:20

1 Answers1

0

use form submit instead of read value from selector. because HTML5 required filed will work if form get submitted.

Saravanan
  • 13
  • 1