number field client validation does not work correctly

[karelvasicek]

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

yii2/framework/assets/yii.activeForm.js

Line 918 in d43341a

return $input.val();

for non-numeric values. This empty value is then passed to

yii2/framework/assets/yii.validation.js

Line 120 in d43341a

number: function (value, messages, options) {

via

yii2/framework/assets/yii.activeForm.js

Line 367 in d43341a

this.validate(this, getValue($form, this), msg, deferreds, $form);

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]

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

[lubosdz]

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

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

[lubosdz]

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]

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