number field client validation does not work correctly

karelvasicek commented 7 months ago

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

samdark commented 7 months ago

Interesting. Do you have time for a pull request with a fix and tests?

lubosdz commented 7 months ago

@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 ?

karelvasicek commented 7 months ago

@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:

obrazek

lubosdz commented 7 months ago

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.

karelvasicek commented 7 months ago

@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 number field. 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?

yiisoft / yii2