Блог

Я новичок в программировании. В моем коде много ошибок, и любая помощь будет приветствоваться. Сначала я пытаюсь написать функцию в файле JavaScript, куда она отправляет данные на серверную часть, я разместил фрагмент в своем интерфейсе, чтобы помочь визуализировать то, чего я пытаюсь достичь.

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

Количество (indivQty) должно быть ТОЛЬКО int больше 0 и меньше stockIndivQty .

Функция для отправки / сохранения данных:

         async function saveTransfer(){

    //ID (inventorylocation table)
    let invLocId = document.querySelector('#itemID span').textContent;
    console.log('invLocId: ' invLocId);
    // Item SKU
    let customSku = document.querySelector('#sku span').textContent;
    console.log('itemSku: ' customSku);
    // Type
    let invType = document.querySelector('#type span').textContent;
    console.log('type: ' invType);
    // InvID
    let invId = document.querySelector('#invID span').textContent;
    console.log('Inventory ID: ' invId);
    let stockIndivQty = document.querySelector('#indivQty span').textContent;

    let trs = document.querySelectorAll('.rows .row');
    let locations = [];

    for(let tr of trs) {
        let location = {};
        location.indivQty =  tr.querySelector('.quantity').value;
        location.locationName =  tr.querySelector('.input-location').value;
        locations.push(location);
    }
    console.log('locations: ' locations);

    let formData = new FormData();
    formData.append('invLocId', invLocId);
    formData.append('customSku', customSku);
    formData.append('locations', JSON.stringify(locations));
    formData.append('invType', invType);
    formData.append('invId', invId);

    let response = await fetch(apiServer 'itemTransferBay/update', {method: 'POST', headers: {'DC-Access-Token': page.userToken}, body: formData});
    let responseData = await response.json();

    if (!response.ok || responseData.result != 'success') {     
        window.alert('ERROR');
    } else {
        window.alert('teste');
        location.reload();
            }
}
  

 window.addEventListener("load", () => {
  let elTotalQuantity = document.querySelector("#totalqty");
  let totalQuantity = parseInt(elTotalQuantity.innerHTML);
  
  function getSumOfRows() {
    let sum = 0;
    for (let input of document.querySelectorAll("form .row > input.quantity"))
      sum  = parseInt(input.value);
    return sum;
  }
  function updateTotalQuantity() {
      elTotalQuantity.innerHTML = totalQuantity - getSumOfRows();
  }
  
  function appendNewRow() {
    let row = document.createElement("div");
    row.classList.add("row");
    let child;
    
    // input.quantity
    let input = document.createElement("input");
    input.classList.add("quantity");
    input.value = "0";
    input.setAttribute("readonly", "");
    input.setAttribute("type", "text");
    row.append(input);
    
    // button.increment
    child = document.createElement("button");
    child.classList.add("increment");
    child.innerHTML = " ";
    child.setAttribute("type", "button");
    child.addEventListener("click", () => {
      if (getSumOfRows() >= totalQuantity) return;
      input.value  ;
      updateTotalQuantity();
    });
    row.append(child);
    
    // button.increment
    child = document.createElement("button");
    child.classList.add("decrement");
    child.innerHTML = "-";
    child.setAttribute("type", "button");
    child.addEventListener("click", () => {
      if (input.value <= 0) return;
      input.value--;
      updateTotalQuantity();
    });
    row.append(child);
    // label.location
    child = document.createElement("label");
    child.classList.add("location-label");
    child.innerHTML = "Location: ";
    row.append(child);

    // input.location
    let input2 = document.createElement("input");
    input2.classList.add("input-location");
    input2.value = "";
    input2.setAttribute("type", "text");
    row.append(input2);
    // button.remove-row
    child = document.createElement("button");
    child.classList.add("remove-row");
    child.innerHTML = "Remove";
    child.setAttribute("type", "button");
    child.addEventListener("click", () => {
      row.remove();
      updateTotalQuantity();
    });
    row.append(child);
    
    document.querySelector("form .rows").append(row);
  }
  
  document.querySelector("form .add-row").addEventListener("click", () => appendNewRow());
  
  appendNewRow();
});  

 <form>
  <label>Total Quantity: <span id="totalqty">10</span></label>
  <br>
  <div class="rows">
  </div>
  <button type="button" class="add-row">Add new row</button>
</form>  

Вы можете использовать функции JavaScript parseInt() и isNaN() проверить, является ли значение допустимым числом, а затем использовать базовые операторы if, чтобы проверить, находится ли число внутри заданного диапазона.
Если нет, то отобразите уведомление о том, что какое-то значение неверно (лучше всего: выделите неправильное поле ввода) и return , чтобы не доходить до кода, в котором вы отправляете данные на серверную часть.

Пример будет выглядеть так:

 let valueFromString = parseInt("10");
if (isNaN(valueFromString)) valueFromString = 0; // Define default value

let lowerBound = 0;
let upperBound = 20;

// Checking if valueFromString is of range [lowerBound, upperBound]; if not, 'return;'
if (valueFromString < lowerBound || valueFromString > upperBound) return;
  

Теперь большинству значений не обязательно требуется дополнительное присвоение новым переменным, таким как lowerBound или upperBound . Однако для целей примера это продемонстрировано здесь.