Проверка для TextField типа Номер

Question

Я использую это текстовое поле:

 <TextField
    variant="outlined"
    margin="normal"
    id="freeSeats"
    name="freeSeats"
    helperText={touched.freeSeats ? errors.freeSeats : ''}
    error={touched.freeSeats && Boolean(errors.freeSeats)}
    label="Free Seats"
    value={freeSeats}
    onChange={change.bind(null, 'freeSeats')}
  />

с этой проверкой:

export const schema = Yup.object({
  freeSeats: Yup.number()
    .required('This Field is Required')
    .typeError('A Number is Required'),
});

Работает хорошо и выдает ошибку при вводе алфавитов. Однако, когда я добавляю

type="number"

внутри текстового поля, появляются стрелки для увеличения / уменьшения числового значения, но проверка больше не работает. Так что даже если я напишу алфавит, это не даст мне ошибки. и если я переместлюсь в другое текстовое поле после ввода алфавитов, ввод просто перекрывается с меткой, как будто вообще не было ввода.

Есть ли способ сохранить стрелки типа номера пользовательского интерфейса материала вместе с проверкой?

https://codesandbox.io/s/tender-wind-zwh6i?file= / src / App.tsx

Answer 1

Вот вам go, все отлично работает. Пользователь не может вводить буквы во входных данных только цифры, и обязательное поле проверки также отлично работает:

https://codesandbox.io/s/vigorous-goodall-wgw2w

Answer 2

Вот что происходит внизу.

• <input type="number"> - это самый низкий уровень validation в этом поле на уровне DOM API. Таким образом, браузеры обрабатывают это, добавляя эти маленькие стрелки, чтобы показать, что ожидается только numbers. Браузер не будет жаловаться, когда вы вводите letters, но молча они не принимают это value.

• Поэтому, чтобы улучшить это поведение, большинство библиотек придумали высокий уровень validation. Вот где Yup и множество пакетов форм входят в картину.

Это противоречивое поведение вызвано тем, что проверка DOM "тихий низкоуровневый" нарушает правила Yup проверка более высокого уровня.

На самом деле, в браузерах, которые не поддерживают type="number", этот ввод возвращается к type="text". Вот хорошее прочтение на этом .