Блог

У меня есть табличная форма с несколькими строками, которые контролируются пользователем. Это означает, что они могут добавлять столько, сколько захотят. Давайте представим, что пользователь запросил 5 строк, и мне нужно проверить, все ли они имеют значения.

 function validateForm() {
   var lastRowInserted = $("#packageAdd tr:last input").attr("name"); // gives me "packageItemName5"
   var lastCharRow = lastRowInserted.substr(lastRowInserted.length - 1); // gives me 5
   var i; 
       for (i = 1; i <= lastCharRow; i  ) { 
           var nameValidate[] = document.forms["packageForm"]["packageItemName"].value; 

           if(nameValidate[i].length<1){
              alert('Please fill: ' nameValidate[i]);
               return false;
           }
       }
  }
  

Как я могу получать значения packageItemName1 — 5 в цикле, чтобы затем я мог использовать их для проверки. Хотите, чтобы цикл обрабатывал этот код

 var nameValidate[] = document.forms["packageForm"]["packageItemName1"].value; 
var nameValidate[] = document.forms["packageForm"]["packageItemName2"].value;
var nameValidate[] = document.forms["packageForm"]["packageItemName3"].value;
var nameValidate[] = document.forms["packageForm"]["packageItemName4"].value;
var nameValidate[] = document.forms["packageForm"]["packageItemName5"].value; 
  

Вот так

 const validatePackageItems = () => {
  const nameValidate = $("form[name=packageForm] input[name^=packageItemName]"); // all fields with name starting with packageItemName
  const vals = nameValidate.map(function() { return this.value }).get(); // all values
  const filled = vals.filter(val => val.trim() !== ""); // all values not empty

  console.log("Filled", filled, "= ", filled.length, "filled of", vals.length)

  return filled.length === vals.length
};

$("[name=packageForm]").on("submit",(e) => {
  if (!validatePackageItems()) {
    alert("not valid");
    e.preventDefault();
  }    
})  

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="packageForm">
  <input type="text" name="packageItemName1" value="one" /><br/>
  <input type="text" name="packageItemName2" value="two" /><br/>
  <input type="text" name="packageItemName3" value="" /><br/>
  <input type="text" name="packageItemName4" value="four" /><br/>
  <input type="submit">
</form>  

Вы можете использовать интерполяцию строк для динамического получения ключа:

 for (let i = 1; i < 6; i  ) {
    const currentValue = document.forms.packageForm[`packageItemName${i}`]
    console.log('current value:', currentValue)
}