number field client validation does not work correctly
What steps will reproduce the problem?
Create an active form with ->textInput(['type' => 'number') with number validation rule created for corresponding attribute. If non-numeric value is entered to the field, client validation passes.
What is the expected result?
Validation error shown.
What do you get instead?
Validation passes and no error is shown.
Additional info
It is due to empty value returned by https://github.com/yiisoft/yii2/blob/d43341a73ab9ab711c42b74c117e076275d9b8c0/framework/assets/yii.activeForm.js#L918 for non-numeric values. This empty value is then passed to https://github.com/yiisoft/yii2/blob/d43341a73ab9ab711c42b74c117e076275d9b8c0/framework/assets/yii.validation.js#L120 via https://github.com/yiisoft/yii2/blob/d43341a73ab9ab711c42b74c117e076275d9b8c0/framework/assets/yii.activeForm.js#L367-L367 and as empty value is a valid value, validation passes.
| Q | A |
|---|---|
| Yii version | 2.0.49.2 |
| PHP version | 8.1.18 |
| Operating system | Fedora |
Interesting. Do you have time for a pull request with a fix and tests?
@karelvasicek You mean if you enter "aaa" into numeric field, it will not show error? I have never seen that. On active forms it shows error in my project. What value exactly did you fill in ?
@lubosdz
You mean if you enter "aaa" into numeric field, it will not show error?
Yes, correct. I've just installed fresh basic app, changed Name field in Contact form to <?= $form->field($model, 'name')->textInput(['autofocus' => true, 'type' => 'number']) ?>, removed the name attribute from required rule and added a new ['name', 'number'] rule. Client validation result is as follows:
What is your model validation rule for the attribute?
Did you add to rules e.g. [['name'], 'number'], ?
Validator to which you are pointing is related to model validation rule for number, not the input attribute type="number". Also I dont think that yii.validation.js supports HTML5 specific attributes like type="number" or type="email". It would also make no sense on client side only. I tested your scenario and adding rule ``[['name'], 'number']` worked fine for me.
@lubosdz
Did you add to rules e.g. [['name'], 'number'], ?
Yes, I wrote that in my comment. I wrote "...and added a new ['name', 'number'] rule".
is related to model validation rule for number
Yes, it is. As I wrote, I have number rule in rules().
Also I dont think that yii.validation.js supports HTML5 specific attributes like type="number" or type="email"
Could be. At least number field is not client-validated correctly. Should be HTML5 fields supported?
It would also make no sense on client side only
How did you mean that?
- Why would client side validation make no sense? It improves UX significantly.
- "Browser" validation is performed on form submission and Yii backend validation would be performed too, of course. But this is totally unrelated to this issue. This issue is about not working client side validation for
numberfield. The field turns green even with invalid value.
I tested your scenario and adding rule ``[['name'], 'number']` worked fine for me.
What exactly did work fine for you?