如何在表单的 javascript 中添加验证，以便在最后一行为空时不附加表单（在所有字段之前不应该创建另一行）

Question

    function add_variant(){
    
        var thickness=document.forms["create_product"]["thickness"].value;
        var thickness_unit=document.forms["create_product"]["thickness_unit"].value;
        var product_qty=document.forms["create_product"]["product_qty"].value;
        var product_cost_price=document.forms["create_product"]["product_cost_price"].value;
        var product_unit=document.forms["create_product"]["product_unit"].value;
        var product_color=document.forms["create_product"]["product_color"].value;
        var thickness_dim =document.forms["create_product"]["thickness"].value;

        console.log("thick"+thickness);
        console.log("thick dim"+thickness_dim);
        
            if(thickness == null || thickness == "", thickness_dim ==""|| thickness_dim==null)
            {
             alert('you must filled previous data');
             return false;
            }
           
             var temp = document.getElementById("product_dimension").content;
             var copy = document.importNode(temp,true);
             document.getElementById("product_description").appendChild(copy);
             
            }

<div class="col-md-2">
                  <label>Product Variants</label>
                  <a class="btn btn-primary" id="add_variant" onclick="add_variant()"><i class="fa fa-plus"></i> add Variant</a>
                </div>

<div id="product_description">
               <div class="row" >
               
                    <div class="col-sm-1">
                        <div class="form-group">
                      <label>Actions</label><br>
                      <button class="btn btn-danger"><i class="fa fa-trash"></i></button>
                      </div>
                    </div>
                    
                    <div class="col-md-1">
                      <div class="form-group">
                       <label>Thickness</label>
                       <input type="number" class="form-control" name="thickness" id="thickness">
                      </div>
                    </div>
                    
                    <div class="col-md-2">
                      <div class="form-group">
                       <label>Thickness Unit</label>
                       <select class="form-control"name="thickness_unit" id="thickness_unit">
                        <option>mm</option>
                        <option>feet</option>
                        <option>Square feet</option>
                        <option>meter</option>
                        <option>mm square</option>
                        <option>Steel Gauge</option>
                       </select>
                      </div>
                    </div>
                    
                    <div class="col-md-2">
                        <div class="form-group">
                       <label>Product Qty.</label>
                       <input type="number" class="form-control" name="product_qty" id="product_qty">
                      </div>
                    </div>
                  <div class="col-md-2">
                      <div class="form-group">
                       <label>Product Cost Price</label>
                       <input type="number" class="form-control" name="product_cost_price" id="product_cost_price">
                      </div>
                 </div>
                  <div class="col-md-2">
                      <div class="form-group">
                       <label>Product Unit</label>
                       <select class="form-control" name="product_unit" id="product_unit">
                        <option>Sheet</option>
                        <option>No</option>
                       </select>
                      </div>
                 </div>
                 <div class="col-md-2">
                      <div class="form-group">
                       <label>Product Color</label>
                       <input type="text" class="form-control" name="product_color" id="product_color">
                      </div>
                 </div>
               </div>
               </div>
               
               
               
               
               
               <div>
              <template   id="product_dimension">
               <div class="row">
                <div class="col-md-1">
                  <div class="form-group">
                  <label>Actions</label><br>
                  <button class="btn btn-danger btnDelete"><i class="fa fa-trash"></i></button>
                  </div>
                </div>
                <div class="col-md-1">
                  <div class="form-group">
                   <label>Thickness</label>
                   <input type="number" class="form-control" name="thickness" id="thickness">
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="form-group">
                   <label>Thickness Unit</label>
                   <select class="form-control"name="thickness_unit" id="thickness_unit">
                    <option>mm</option>
                    <option>feet</option>
                    <option>Square feet</option>
                    <option>meter</option>
                    <option>mm square</option>
                    <option>Gauge</option>
                   </select>
                  </div>
                </div>
                <div class="col-md-2">
                  <div class="form-group">
                   <label>Product Qty.</label>
                   <input type="number" class="form-control" name="product_qty" id="product_qty">
                  </div>
                 </div>
                  <div class="col-md-2">
                      <div class="form-group">
                       <label>Product Cost Price</label>
                       <input type="number" class="form-control" name="product_cost_price" id="product_cost_price">
                      </div>
                 </div>
                  <div class="col-md-2">
                      <div class="form-group">
                       <label>Product Unit</label>
                       <select class="form-control" name="product_unit" id="product_unit">
                        <option>Sheet</option>
                        <option>Nos</option>
                       </select>
                      </div>
                 </div>
                 <div class="col-md-2">
                      <div class="form-group">
                       <label>Product Color</label>
                       <input type="text" class="form-control" name="product_color" id="product_color">
                      </div>
                 </div>
                 
               </div>
              </template>
              </div>

我是 java 脚本的新手我想在我的添加产品表单上添加一些验证，我想在其中执行一些附加功能我想附加一个 div 但是如果前一行是空的，那么它不应该 add/append 新行但是在这样做时它只是检查第一行的验证当我添加第二行时尝试添加第三行它显示错误

请任何人帮助我解决这个问题，这是我的代码

JS: 函数 add_variant(){

    var thickness=document.forms["create_product"]["thickness"].value;
    var thickness_unit=document.forms["create_product"]["thickness_unit"].value;
    var product_qty=document.forms["create_product"]["product_qty"].value;
    var product_cost_price=document.forms["create_product"]["product_cost_price"].value;
    var product_unit=document.forms["create_product"]["product_unit"].value;
    var product_color=document.forms["create_product"]["product_color"].value;
    var thickness_dim =document.forms["create_product"]["thickness"].value;

    console.log("thick"+thickness);
    console.log("thick dim"+thickness_dim);
    
        if(thickness == null || thickness == "", thickness_dim ==""|| thickness_dim==null)
        {
         alert('you must filled previous data');
         return false;
        }
       
         var temp = document.getElementById("product_dimension").content;
         var copy = document.importNode(temp,true);
         document.getElementById("product_description").appendChild(copy);
         
        }

               <div id="product_description">
                     <div class="row" >
                         <div class="col-sm-1">
                          <button class="btn btn-danger"><i class="fa fa- 
     trash"></i></button>
                    </div>
                   <!--further fields-->
                 </div>

 
    <template   id="product_dimension">
    <div class="row">
    <div class="col-md-1">
    <div class="form-group">
    <button class="btn btn-danger btnDelete"><i class="fa fa-trash"></i> 
    </button>
<!--further fields->
</div>
</div>
</template>
      `

Answer 1

代码如下：

const addVariant = document.getElementById("add_variant");
const productDescription = document.getElementById("product_description");
const errorAlert = document.querySelector(".alert");

const template = `<div class="row my-4 p-3 rounded productTemp">
  <div class="col-md-1">
    <div class="form-group">
      <label class="mb-2">Actions</label>
      <br />
      <button class="btn btn-danger btnDelete">
        <i class="fa fa-trash"></i>
      </button>
    </div>
  </div>
  <div class="col-md-1">
    <div class="form-group">
      <label class="mb-2">Thickness</label>
      <input type="number" class="form-control" name="thickness" />
    </div>
  </div>
  <div class="col-md-2">
    <div class="form-group">
      <label class="mb-2">Thickness Unit</label>
      <select class="form-control" name="thickness_unit">
        <option>mm</option>
        <option>feet</option>
        <option>Square feet</option>
        <option>meter</option>
        <option>mm square</option>
        <option>Gauge</option>
      </select>
    </div>
  </div>
  <div class="col-md-2">
    <div class="form-group">
      <label class="mb-2">Product Qty.</label>
      <input type="number" class="form-control" name="product_qty" />
    </div>
  </div>
  <div class="col-md-2">
    <div class="form-group">
      <label class="mb-2">Product Cost Price</label>
      <input type="number" class="form-control" name="product_cost_price" />
    </div>
  </div>
  <div class="col-md-2">
    <div class="form-group">
      <label class="mb-2">Product Unit</label>
      <select class="form-control" name="product_unit">
        <option>Sheet</option>
        <option>Nos</option>
      </select>
    </div>
  </div>
  <div class="col-md-2">
    <div class="form-group">
      <label class="mb-2">Product Color</label>
      <input type="text" class="form-control" name="product_color" />
    </div>
  </div>
</div>
`;

function addAlert(message) {
  errorAlert.classList.add("show");
  errorAlert.innerHTML = message;
  setTimeout(() => {
    errorAlert.classList.remove("show");
  }, 3000);
}

addVariant.addEventListener("click", function() {
  const productTemp = document.querySelectorAll(".productTemp");
  const lastElement = productTemp[productTemp.length - 1];

  const thickness = lastElement.querySelector('[name="thickness"]');
  const thicknessUnit = lastElement.querySelector('[name="thickness_unit"]');
  const productQty = lastElement.querySelector('[name="product_qty"]');
  const productPrice = lastElement.querySelector('[name="product_cost_price"]');
  const productUnit = lastElement.querySelector('[name="product_unit"]');
  const productColor = lastElement.querySelector('[name="product_color"]');

  if (
    thickness.value !== "" &&
    thicknessUnit.value !== "" &&
    productQty.value !== "" &&
    productPrice.value !== "" &&
    productUnit.value !== "" &&
    productColor.value !== ""
  ) {
    productDescription.insertAdjacentHTML("beforeend", template);
  } else {
    addAlert("Fields can not be empty! ");
  }
});

.productTemp {
  background-color: #2c3035;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />

<body class="bg-dark text-white">


  <div class="container mt-5 bg-dark text-white">
    <div class="alert alert-danger alert-dismissible fade mb-5" role="alert"></div>

    <div class="col-md-2 mb-4">
      <label class="mb-2">Product Variants</label>
      <a class="btn btn-primary" id="add_variant">
        <i class="fa fa-plus"></i> add Variant
      </a>
    </div>

    <div id="product_description">
      <div class="row my-4 p-3 rounded productTemp">
        <div class="col-sm-1">
          <div class="form-group">
            <label class="mb-2">Actions</label>
            <br />
            <button class="btn btn-danger">
                <i class="fa fa-trash"></i>
              </button>
          </div>
        </div>

        <div class="col-md-1">
          <div class="form-group">
            <label class="mb-2">Thickness</label>
            <input type="number" class="form-control" name="thickness" />
          </div>
        </div>

        <div class="col-md-2">
          <div class="form-group">
            <label class="mb-2">Thickness Unit</label>
            <select class="form-control" name="thickness_unit">
              <option>mm</option>
              <option>feet</option>
              <option>Square feet</option>
              <option>meter</option>
              <option>mm square</option>
              <option>Steel Gauge</option>
            </select>
          </div>
        </div>

        <div class="col-md-2">
          <div class="form-group">
            <label class="mb-2">Product Qty.</label>
            <input type="number" class="form-control" name="product_qty" />
          </div>
        </div>
        <div class="col-md-2">
          <div class="form-group">
            <label class="mb-2">Product Cost Price</label>
            <input type="number" class="form-control" name="product_cost_price" />
          </div>
        </div>
        <div class="col-md-2">
          <div class="form-group">
            <label class="mb-2">Product Unit</label>
            <select class="form-control" name="product_unit">
              <option>Sheet</option>
              <option>No</option>
            </select>
          </div>
        </div>
        <div class="col-md-2">
          <div class="form-group">
            <label class="mb-2">Product Color</label>
            <input type="text" class="form-control" name="product_color" />
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

如何在表单的 javascript 中添加验证，以便在最后一行为空时不附加表单（在所有字段之前不应该创建另一行）

how to add validation in javascript on form so that it should not append form when last row is empty (should not create another row untill all fields)

javascript

validation

append