如何檢查文本框是否為空並顯示彈出消息

Question

我正在為網站編寫一些代碼，以在文本框提交中的任何參數留空時提醒用戶，並且由於某種原因，它不起作用。 我已經嘗試了所有方法，但不確定我是否采用了正確的方法。 這是我的 javascript 代碼：

let assetInfo = {
    asset_tag_no: $(`#asset_tag_no${i}`).val(),
    manufacturer: $(`#manufacturer_serial_no${i}`).val(),
    descriptions: $(`#description${i}`).val(),
    costs: $(`#cost${i}`).val(),
    po_no: $(`#p.o._no${i}`).val(),
    department_division_head: $(`#department_division_head${i}`).val(),
            }
        $('#submit').click(function(assetInfo){
        if($(assetInfo).val() == ''){
            alert('Input can not be left blank');
            }
        });

這是我的 HTML：

<button type="button" class="btn btn-primary" id='submit'>SUBMIT</button>

有小費嗎？

Answer 1

嘗試檢查assetInfo object 的具體值，而不是 object 本身。

$('#submit').click(function(assetInfo){
  if (assetInfo.asset_tag_no == '' || assetInfo.manufacturer == '' || assetInfo.descriptions == '' || assetInfo.costs == '' || assetInfo.po_no == '' || assetInfo.department_division_head == '') {
    alert('Input can not be left blank');
  }
});

或者，您可以簡單地將required屬性添加到input元素，然后瀏覽器可以在輸入丟失時以本機方式提醒用戶。

<input type="text" name="asset_tag_no" required/>

Answer 2

例如，當您使用 JQuery 通過$('.foo')獲取元素時，它會返回鏈接到 DOM 的熱 object。 但是，當您在 JQuery 元素上調用el.val()時，您會得到一個原語，因此它不再與該元素的 DOM 值相關聯。 因此，您應該調整assetInfo常量以僅包含元素。 然后，在事件偵聽器中需要時獲取元素的原始值。 這是你的常量：

let assetInfo = {
    asset_tag_no: $(`#asset_tag_no${i}`),
    manufacturer: $(`#manufacturer_serial_no${i}`),
    descriptions: $(`#description${i}`),
    costs: $(`#cost${i}`),
    po_no: $(`#p.o._no${i}`),
    department_division_head: $(`#department_division_head${i}`),
}

現在，您可以通過在assetInfo上調用Object.values來獲取元素數組。 之后，我們可以使用Array.prototype.every方法來檢查每個元素的值是否不為空。 您還應該從回調 function 中刪除該參數，因為您只能通過其名稱訪問它。

$('#submit').click(function() {
  const allValid = Object.values(assetInfo).every((el) => el.val() != "");

  if (!allValid) {
    alert('Input can not be left blank');
  }
});

Answer 3

如果你在談論文本框，這里是解決方案：

所以在 HTML 中，你可以在事件期間使用參數調用 Javascript 函數。 您可以使用的 function 稱為“onblur”，它會在 window 中的 object 失去焦點時觸發。 所以你會輸入：

<input type="text" onblur="myFunction(this)" />
<p id="errorMessage" />

然后出於顯而易見的原因，我們實際上需要 function。 現在我們將 go：

const errorMessage = document.getElementById('errorMessage')
function myFunction(field) {
   if (field === "") {
      errorMessage.innerText = "One or more fields were not entered.";
   }
}

希望這有所幫助。