Level 80
@ht-ftw Do you have a typo? It should be wire:model (colon), not wire.model (dot).
Feb 2, 2024
7
Level 1
validation numeric - not working?
Hi, I've got the following validation rule in my component:
#[Validate('required', message: 'Enter price.')]
#[Validate('numeric', message: 'The value must be numeric.')]
public $price;
and an input field in the blade file:
<input type="number" wire:model="price">
the validation works fine however when I type in a text (e.g. "dowdy") it is displaying "required" error so the message is "Enter Price" instead of "numeric" message. If I remove the:
type="number"
from my input field the validation works fine and displays correct error if the input value is not numeric. What am I doing wrong? Or should it be like that? Thanks I'm on Laravel 10 and Livewire 3.4.4 HT
Level 1
@martinbean thanks for pointing that out. I corrected it here, in the actual code is of course a “:”
Level 80
@HT-ftw In that case, try adding the .number modifier to your wire:model binding:
<input type="number" wire:model.number="price">
Level 1
@martinbean Unfortunetaly didn't help, however the problem seems to be with the browser so in that case Safari. When I enter text into a number type input (which is possible in Safari) it send and empty variable there for livewire recognises it as if there was empty input and then "required" validation fires on. Thanks
Level 50
that is weird, how do you type in "dowdy" when the input type is set to number? most browsers restrict the input to just numbers (and some others like: e, ., +, -).
it fallbacks to text if not supported, but it really shouldnt https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#browser_compatibility)
i suppose, in your case, it somehow just strips down all of non-numeric characters and all is left is just an empty string, thus the "required - Enter price" error
Level 1
@s4muel thanks, you pointed me in the right direction. The problem seems to be related to Safari on Mac as in Safari despite type="number" I can input text however when I switched do Chrome it is as you say no option to enter text in a number field. So the question now is how to solve it so it also works as intended on Safari? Any idea how would you solve that? My problem is that all employees at my clients office use Apple devices and want to stick to Safari. Thanks
Level 50
i am not very proficient in livewire, but in a case that safari really ignores the type="number" i would probably just remove the type (or keep it🤔) and create some kind of old-school-javascript to allow only numbers in that input (when typing or even pasting) to enhance UX
Please or to participate in this conversation.