在 8 個文本框中，至少有一個應使用 jQuery 填充

Question

我有 8 個文本框，我想在單擊按鈕時使用 jQuery 至少設置一個文本框。

下面是我的 html

<tr>
                                        <td>Azimuth Angle</td>
                                        <td>
                                            <input type="text" class="form-control" id="txtAzimuth16" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" /></td>
                                        <td>
                                            <input type="text" class="form-control" id="txtAzimuth18" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" /></td>
                                        <td>
                                            <input type="text" class="form-control" id="txtAzimuth12" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" /></td>
                                        <td>
                                            <input type="text" class="form-control" id="txtAzimuth17" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" /></td>
                                        <td>
                                            <input type="text" class="form-control" id="txtAzimuth11" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" /></td>
                                        <td>
                                            <input type="text" class="form-control" id="txtAzimuth19" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" /></td>
                                        <td>
                                            <input type="text" class="form-control" id="txtAzimuth20" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" /></td>
                                        <td>
                                            <input type="text" class="form-control" id="txtAzimuth29" maxlength="10" oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1');" /></td>
                                    </tr>

下面是我的 jQuery 代碼進行驗證，但它會檢查所有文本框以進行驗證。 如果其中任何一個被填滿了就OK了，否則會提示錯誤。

if ($('#txtAzimuth16').val() == "" || $('#txtAzimuth16').val() == null) {
    jAlert('Update Azimuth Angle  GSAT 16 (55° E) of Antenna Orientation section', 'INFORMATION');
    $('.tabList li a[rel="#antennaOrientation"]').click();
    checkError();
    return false;
}

if ($('#txtAzimuth18').val() == "" || $('#txtAzimuth18').val() == null) {
    jAlert('Update Azimuth Angle GSAT 18 (74° E) of Antenna Orientation section', 'INFORMATION');
    $('.tabList li a[rel="#antennaOrientation"]').click();
    checkError();
    return false;
}

if ($('#txtAzimuth12').val() == "" || $('#txtAzimuth12').val() == null) {
    jAlert('Update Azimuth Angle GSAT 12 (83° E) of Antenna Orientation section', 'INFORMATION');
    $('.tabList li a[rel="#antennaOrientation"]').click();
    checkError();
    return false;
}

if ($('#txtAzimuth17').val() == "" || $('#txtAzimuth17').val() == null) {
    jAlert('Update Azimuth Angle GSAT 17 (93.5° E) of Antenna Orientation section', 'INFORMATION');
    $('.tabList li a[rel="#antennaOrientation"]').click();
    checkError();
    return false;
}
//CR START 1072//

if ($('#txtAzimuth11').val() == "" || $('#txtAzimuth11').val() == null) {
    jAlert('Update Azimuth Angle GSAT 11 (74° E) of Antenna Orientation section', 'INFORMATION');
    $('.tabList li a[rel="#antennaOrientation"]').click();
    checkError();
    return false;
}

if ($('#txtAzimuth19').val() == "" || $('#txtAzimuth19').val() == null) {
    jAlert('Update Azimuth Angle GSAT 19 (48° E) of Antenna Orientation section', 'INFORMATION');
    $('.tabList li a[rel="#antennaOrientation"]').click();
    checkError();
    return false;
}

if ($('#txtAzimuth20').val() == "" || $('#txtAzimuth20').val() == null) {
    jAlert('Update Azimuth Angle GSAT 20 (55° E) of Antenna Orientation section', 'INFORMATION');
    $('.tabList li a[rel="#antennaOrientation"]').click();
    checkError();
    return false;
}

if ($('#txtAzimuth29').val() == "" || $('#txtAzimuth29').val() == null) {
    jAlert('Update Azimuth Angle GSAT 29 (55° E) of Antenna Orientation section', 'INFORMATION');
    $('.tabList li a[rel="#antennaOrientation"]').click();
    checkError();
    return false;
}

Answer 1

要查找集合中沒有值的input ，您可以使用filter() 。

但是，您應該注意，您的代碼有很多重復，並且可以通過使用常見的 class 和data屬性來保存每個輸入的驗證消息來干掉。 另請注意，內聯事件處理程序（即onX屬性）不是好的做法，應避免使用。 由於您已經在使用 jQuery 您可以使用它來附加不顯眼的事件處理程序，如下所示：

 let $azimuth = $('.azimuth').on('input', e => e.target.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')); $('form').on('submit', e => { let $emptyFields = $azimuth.filter((i, e) => e.value.trim() == '').each((i, el) => { //jAlert($(el).data('msg'), 'INFORMATION'); //checkError(); console.log($(el).data('msg')); }); if ($emptyFields.length) { e.preventDefault(); $('.tabList li a[rel="#antennaOrientation"]').click(); } });

 input { width: 50px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form> <table> <tr> <td>Azimuth Angle</td> <td><input type="text" class="azimuth form-control" id="txtAzimuth16" maxlength="10" data-msg="Update Azimuth Angle GSAT 16 (55° E) of Antenna Orientation section" /></td> <td><input type="text" class="azimuth form-control" id="txtAzimuth18" maxlength="10" data-msg="Update Azimuth Angle GSAT 18 (74° E) of Antenna Orientation section" /></td> <td><input type="text" class="azimuth form-control" id="txtAzimuth12" maxlength="10" data-msg="Update Azimuth Angle GSAT 12 (83° E) of Antenna Orientation section" /></td> <td><input type="text" class="azimuth form-control" id="txtAzimuth17" maxlength="10" data-msg="Update Azimuth Angle GSAT 17 (93° E) of Antenna Orientation section" /></td> <td><input type="text" class="azimuth form-control" id="txtAzimuth11" maxlength="10" data-msg="Update Azimuth Angle GSAT 11 (74° E) of Antenna Orientation section" /></td> <td><input type="text" class="azimuth form-control" id="txtAzimuth19" maxlength="10" data-msg="Update Azimuth Angle GSAT 19 (48° E) of Antenna Orientation section" /></td> <td><input type="text" class="azimuth form-control" id="txtAzimuth20" maxlength="10" data-msg="Update Azimuth Angle GSAT 20 (55° E) of Antenna Orientation section" /></td> <td><input type="text" class="azimuth form-control" id="txtAzimuth29" maxlength="10" data-msg="Update Azimuth Angle GSAT 29 (55° E) of Antenna Orientation section" /></td> </tr> </table> <button>Submit</button> </form>

Answer 2

您可以使用這樣的方法，使用 function check() ：

var inputs = $("#txtAzimuth16").parent().find("input[type='text']");

function check() {
  let found = false;

  inputs.each(function() {
    if ($(this).val()) {
      found = true;
      return false;
    }
  });
  if (!found) {
    alert("your message");
  }
}

Answer 3

請參閱下面如何檢查是否選擇了所有輸入。 通過根據輸入的值（空）過濾輸入並對其進行計數，我們可以僅在沒有輸入填充的情況下顯示錯誤。 下面的代碼使用 ES5，因為您的環境無法識別 ES6 語法（基於@Rory McCrossan 回答下的評論）

let inputs = $('td input').on('input', function(e){ e.target.value.replace(/[^0-9.]/g, '').replace(/(\..*)\./g, '$1')});

$('buttonClick').on('click', e => {
  let $emptyFields = inputs.filter(function() { return $(this).val() == ""; });
  
  if ($emptyFields.length) {
    e.preventDefault();
    
    $('.tabList li a[rel="#antennaOrientation"]').click();
  } else {
   // no input field is selected
   checkError();
  }
});