Блог

Главная - Вопросы по программированию - Запретить сохранение localstorage, если ввод требуется, но не заполнен?

Запретить сохранение localstorage, если ввод требуется, но не заполнен?

#javascript #html

#javascript #HTML

Вопрос:

У меня есть этот код, который я создаю, и мне интересно, могу ли я запретить сохранение localstorage, если требуемые входные данные в моей форме не заполнены правильно. Прямо сейчас localstorage работает с моей кнопкой отправки, но все равно сохраняется, если выдает сообщение «Пожалуйста, заполните это поле». Любая помощь будет оценена! Вот функция, которую я использую для сохранения данных.

 let writeDate = () => {
if (isLocalStorageEnabled) {
    $("confirmBtn").addEventListener("click", () => {
        let getItem = localStorage.getItem('bookingDate');
        let bookingDate = getItem ? JSON.parse(getItem) : [];

        let bk = Object.assign({}, bookingInfo);
        bk.name = $("fname").value;
        bk.amount = $("famount").value;
        bk.date = $("fdate").value;
        bk.time = $("ftime").value;
        bookingDate.push(bk);

        let date = JSON.stringify(bookingDate);
        localStorage.setItem("bookingDate", date);
    });
};};

Комментарии:

1. Используйте событие отправки в форме вместо click события подтверждения btn.

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

3. добавить type=submit в confirmBtn

Ответ №1:

Тоби, ты можешь реализовать это следующим образом.

Я попытался сохранить имя переменной таким же, как и ваш вопрос.

HTML

 <div>
  <form onsubmit="return onSubmit(event)">
    <label for="fname">Name:
      <input type="text" id="fname" name="fname" required />
    </label>

    <label for="famount">Amount:
      <input type="number" id="famount" name="famount" required />
    </label>

    <label for="fdate">Date:
      <input type="date" id="fdate" name="fdate" required />
    </label>

    <label for="ftime">Time:
      <input type="time" id="ftime" name="ftime" required />
    </label>
    
    <button type="submit">Confirm</button>
  </form>
</div>

javascript

 const onSubmit = (e) => {
  e.preventDefault()

  const prevBookingDate = localStorage.getItem('bookingDate');
  let bookingDate = prevBookingDate ? JSON.parse(prevBookingDate) : [];

  const { fname, famount, fdate, ftime } = e.target
  const bk = {
    name: fname.value,
    amount: famount.value,
    date: fdate.value,
    time: ftime.value
  };
  bookingDate.push(bk);

  let date = JSON.stringify(bookingDate);
  localStorage.setItem("bookingDate", date);
}