Минимум и максимум InputProps не применяются

Question

У меня есть следующая форма:

const handleSubmit = (event) => {
      //Make a network call somewhere
      event.preventDefault();
      console.log("submitted");
  }
<form onSubmit={handleSubmit}>
              <TextField
                InputProps={{ inputProps: { min: 5, max: 11 } }}
                onChange={e => setName(e.target.value)}
                required
              />

              <Button
                type="submit"
              >
                Submit
              </Button>
            </form>

Однако я могу отправить форму, если количество символов меньше пяти или даже больше 11. Как обеспечить соблюдение минимального / максимального значения значения?

Answer 1

Это должно работать ...

...
<TextField
    inputProps={{ min: 5, max: 11, type:"number" }}
    onChange={e => setName(e.target.value)}
    required
/>
...

Это четко указано в документации , вы должны использовать inputProps для собственного атрибута ввода, small i

Answer 2

Атрибуты max и min работают с входами числового типа. Таким образом, вам нужно установить тип ввода как number, в дополнение к inputProps, являющемуся объектом атрибутов.

 <TextField
    inputProps={{ min: 5, max: 11, type: "number" }}
    onChange={e => setName(e.target.value)}
    required
  />

Answer 3

Я считаю, что вы ищете minlength и maxlength:

<TextField
  id="standard-required"
  label="Required"
  inputProps={{
    minlength: 5,
    maxlength: 11,
    pattern: ".{5,11}", // if you have to support IE11
    title: "5 to 11 characters"
  }}
/>

Я бы посоветовал вам протестировать в разных браузерах поддержку этих атрибутов.