Как сделать обязательным заполнение полей в калькуляторе?

Question

[Smirator]

Всех приветствую! Столкнулся с проблемой.
Пишу строительный калькулятор. На данном этапе, пользователь может не вписывать данные и нажать кнопку "Рассчитать" и в значении полей отобразится NAN. Нужно сделать так, чтобы если поля не были заполнены, то они загорались красным и пользователь видел сообщение об обязательности заполнения.
Пробовал через атрибут required - данный вариант не сработал. Добавил условие If(width == null || heigth == null ||...) не работает. Понимаю, что где-то допустил ошибку и что-то не учел.
Благодарю!

<div class="calculator-block p-15">
                    <h2 class="calculator-title">Расчет количества бруса</h2>
                        <form>
                              <p class="calculator-text-value">Высота бруса(мм)</p>
                              <input  type="text" id="height" class="calculator-value" list="height-value">
                               <datalist id="height-value">
                                  <option value="100">
                                  <option value="150">
                                  <option value="200">
                                  <option value="250">
                               </datalist>

                              <p class="calculator-text-value">Ширина бруса(мм)</p>
                              <input id="width" class="calculator-value" list="width-value">
                               <datalist id="width-value">
                                  <option value="100">
                                  <option value="150">
                                  <option value="200">
                                  <option value="250">
                               </datalist>


                              <p class="calculator-text-value">Длина бруса(мм)</p>
                              <input  id="length" class="calculator-value" list="length-value">
                                <datalist id="length-value">
                                   <option value="6000">
                                </datalist>

                                <p class="calculator-text-value">Количество кубов</p>
                                <input id="amount" class="calculator-value" name="calculateValue">

                              <div class="wrapper-calculator-block-btn">
                                <button type="button" name="button" class="calculator-block-btn" id="button">Рассчитать</button>
                              </div>
                              <div class="calculator-block-result">
                                <h3 class="calculator-text-result">Результат</h3>
                                <p id="result" class="calculator-value-result">Введите значения</p>
                                <p id="surface-area" class="calculator-value-result">Введите значения</p>
                              </div>

                        </form>
                     </div>

document.getElementsByName('button')[0].addEventListener('click', calculateThis);

function calculateThis(){
    let height = Number(document.getElementById('height').value);
    let heightValue = Number(height);

    let width = Number(document.getElementById('width').value);
    let widthValue = Number(width);

    let length = Number(document.getElementById('length').value);
    let lengthValue = Number(length);

    let amount = (document.getElementById('amount').value);
    let amountValue = Number(amount);

    let wordsResult = '  шт. бруса';
    let wordsSurfaceArea = ' общая площадь, шт';


    if (height == null || width == null || length == null || amount == null) {
      alert('Вы не ввели значения!');
      return false;
    } else {


      function payment() {
        return (1 / ((widthValue * heightValue * lengthValue) / 1000000000)) * amountValue;
      }

      function surfaceArea() {
        return ((heightValue * widthValue * 2) + (heightValue * lengthValue * 2) + (widthValue * lengthValue * 2)) / 1000000;
      }

      document.getElementById('result').innerHTML = (payment()).toFixed(3) + wordsResult;
      document.getElementById('surface-area').innerHTML = (surfaceArea()).toFixed(1) + wordsSurfaceArea;

    }

Comments

[Froggyweb]

для начала стоит поменять клик на кнопке на submit формы.
ну и использовать методы форм например formdata https://developer.mozilla.org/ru/docs/Web/API/FormData

Answer 1

[irishmann]

Быстро:

if (!height || !width || !length || !amount) {
      alert('Вы не ввели значения!');
      return false;
    } else {

А еще можно событие вешать не на клик кнопки, а на отправку формы, тогда и required будет работать

Comments

[Smirator]

Благодарю!