nette / forms

đź“ť Generating, validating and processing secure forms in PHP. Handy API, fully customizable, server & client side validation and mature design.

Home Page:https://doc.nette.org/forms

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.