提交时实现 CSS 空字段验证答案

【问题标题】：Materialize CSS empty fields validation on submission提交时实现 CSS 空字段验证
【发布时间】：2021-04-28 16:12:46
【问题描述】：

首先，感谢您抽出宝贵时间查看我的问题并尝试帮助我。我一直在开发一个应用程序，我使用 Materialize CSS 表单来收集用户的输入。但是，当用户按下提交按钮时，我一直很难验证空字段。

以下是我的代码，因此您可以更好地了解我的代码。当用户按下表单上的提交按钮时，我需要想出一些 javascript 来验证空字段。我很难创建这个，因为我有嵌套对象来获取我的 API。我尝试创建一个 for in 循环来迭代对象，但没有成功。

对此的任何见解将不胜感激！

再次感谢

let btnSave = document.getElementById("btnSaveGift");
      btnSave.addEventListener("click", APP.addGift);


addGift() {
    //user clicked the save gift button in the modal
    let gift = {
      name: document.getElementById("name").value,
      price: document.getElementById("price").value,
      store: {
        name: document.getElementById("storeName").value,
        productURL: document.getElementById("storeProductURL").value
      }
    }

    //validating the inputs - still working on it.
    
    }

<div class="modal modal-fixed-footer center" id="modalAddGift">
      <div class="modal-content">
        <h4>New Gift idea</h4>
        <p>Why not add another idea?</p>
        <form class="col s12">
          <div class="row">
            <div class="input-field col s12 black-text">
              <input id="name" type="text" class="validate black-text" class="validate" required="" 
              aria-required="true"/>
              <label for="name" class="black-text">Idea</label>
              <span class="helper-text" data-error="please try again"></span>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12 black-text">
              <input id="price" type="number" inputmode="numeric" class="validate black-text" class="validate" required=""
              aria-required="true"/>
              <label for="price" class="black-text">Price</label>
              <span class="helper-text" data-error="invalid price"></span>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12 black-text">
              <input id="storeName" type="text" class="validate black-text" class="validate" required=""
              aria-required="true"/>
              <label for="storeName" class="black-text">Store Name</label>
              <span class="helper-text" data-error="please try again"></span>
            </div>
          </div>
          <div class="row">
            <div class="input-field col s12 black-text">
              <input id="storeProductURL" type="url" class="validate black-text" class="validate" required=""
              aria-required="true"/>
              <label for="storeProductURL" class="black-text">Website</label>
              <span class="helper-text" data-error="invalid URL"></span>
            </div>
          </div>
        </form>
      </div>
      <div class="modal-footer light-blue">
        <a
          href="#!"
          id="btnSaveGift"
          class="modal-close waves-effect waves-green btn-flat white-text"
          >Save Gift Idea</a
        >
      </div>
    </div>

【问题讨论】：

标签： javascript html forms materialize

【解决方案1】：

验证您的输入值应该不是那么困难，因为当单击提交按钮时会调用addGift() 函数并在其中生成gift 对象。那么您的验证可以使用一个简单的 if 语句生效：

// validating
if(!gift.name || !gift.price 
    || !gift.store.name || !gift.store.productURL ){ // This checks for any false value

    // What action you want to take goes here
} else{
   // What to do when all fields are true goes here!
}

【讨论】：