Как отключить поле ввода отправки, пока все обязательные поля и флажки не будут пустыми

avatar
Stainley
9 августа 2021 в 07:01
146
3
0

У меня очень простое веб-приложение, вот ссылка на песочницу:

codesandbox.io/s/eager-kalam-v1lpg

Вопрос: как отключить отправку ввода, пока не будут заполнены все запрошенные поля и флажки? Извините, я работаю с js всего пару дней, поэтому буду признателен за любую помощь

Источник
RABI
9 августа 2021 в 08:06
0

Это может помочь coderhelper.com/questions/41296668/…

Ответы (3)

avatar
aweebit
9 августа 2021 в 09:03
1

К входным данным можно применить атрибут required. Когда один из входных данных в форме имеет этот атрибут, но не был заполнен в момент нажатия кнопки «Отправить», форма не будет отправлена. Вместо этого событие invalid будет запущено для всех входных данных, значения которых отсутствуют. Вы можете использовать его, чтобы сообщить пользователю, что нужно заполнить.

Вот минимальный пример использования React:

const { useState } = React;

function Input(props) {
  const [invalid, setInvalid] = useState(false);
  
  const handleInvalid = event => {
    event.preventDefault();
    console.log('Invalid');
    setInvalid(true);
  };
  
  const handleChange = () => setInvalid(false);
  
  const className = invalid ? 'invalid' : '';

  return (
    <div className={className}>
      <input {...props} onInvalid={handleInvalid} onChange={handleChange} />
      {props.type === "checkbox" && (
        <label htmlFor={props.id}>
          {props.label}
        </label>
      )}
    </div>
  );
}

function Form() {
  const handleSubmit = event => {
    event.preventDefault();
    console.log('Submit');
  };

  return (
    <form onSubmit={handleSubmit}>
      <Input name="name" placeholder="Name" required />
      <Input type="checkbox" name="accept" id="accept" label="I accept Terms of Usage" required />
      <button>Submit</button>
    </form>
  );
}

ReactDOM.render(<Form />  document.getElementById('root'));
.invalid input[type=text], .invalid input:not([type]) {
  border: 2px solid red;
}

.invalid label {
  color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Подробнее о проверке форм на стороне клиента можно прочитать здесь. Спойлер: требование поля — не единственное, что вы можете сделать, просто используя атрибуты HTML.

avatar
CodePlateau
9 августа 2021 в 08:09
0

вы можете добавить атрибут disabled и проверить, возвращает ли функция значение true или нет

например disabled={!validateForm()}

https://coderhelper.com/a/38810178/1916604

здесь возможен дубликат ответа

avatar
CVerica
9 августа 2021 в 07:12
0

Я полагаю, что вы можете просто запустить элемент с атрибутом disabled, а затем проверять валидаторы по мере их обновления. Как только все они достигнут цели, вы можете удалить атрибут disabled с помощью

.

document.querySelector('.button').removeAttr("disabled");

Stainley
9 августа 2021 в 07:19
0

Не могли бы вы дать мне немного более подробное описание? Я работаю с реакцией всего пару дней и не знаю, как проверять валидаторы при обновлении(