netteForms.js: "Please enter a valid value." error on conditionally required number input
xificurk opened this issue · comments
Version: 3.0.x
Bug Description
Client side validation displays confusing error message "Please enter a valid value" when number input is conditionally required and contains an invalid value. Also, this error message is hardcoded in netteForms.js and cannot be localized.
Steps To Reproduce
Create form with conditonally required number input:
$checkbox = $form->addCheckbox('checkbox');
$number = $form->addInteger('number');
$number->addConditionOn($checkbox, Form::FILLED)->setRequired();
$number->addRule(Form::RANGE, 'Select a number from 1 to 10', [1, 10]);
Display the from in browser, check the checkbox and type "666" in the number input (i.e. a value outside of allowed range). When the user attempts to submit the form, "Please enter a valid value" validation error message is displayed.
Expected Behavior
Client side validation error message "Select a number from 1 to 10." is displayed.
Analysis and Possible Solution
This is the problematic code block: https://github.com/nette/forms/blob/master/src/assets/netteForms.js#L188
When checkbox is checked, the number input is required to be filled - number input is considered filled even with invalid value, so the validation succeeds, but then it runs into the mentioned code and the hardcoded error is returned.
I suspect the whole code block could be removed. It looks like all the possible native invalid states are correctly handled in specific validators. I can't really think of a valid use case for which this check in netteForms.js is necessary.