在 8 个文本框中，至少一个应该使用 jquery 填充答案

【问题标题】：Out of 8 textbox atleast one should be filled using jquery在 8 个文本框中，至少一个应该使用 jquery 填充
【发布时间】：2020-08-14 07:21:34
【问题描述】：

我有 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 代码，但它会检查所有文本框以进行验证。如果其中任何一个被填满，请提供帮助，否则会提示错误

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;
}

【问题讨论】：

标签： javascript html jquery asp.net

【解决方案1】：

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

但是您应该注意，您的代码有很多重复，并且可以通过使用公共类和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>

【讨论】：

您在使用 Internet Explorer 吗？
忽略 Visual Studio 中的 JS linter，这很糟糕——即使设置为使用 ESLiint。如果您在现代浏览器中运行它，它将正常工作，如您在上面的示例中所见
@hud 哪个版本的视觉工作室？对比 2015/2017：stackoverflow.com/a/54708143/2181514 对比 2013：stackoverflow.com/questions/24034668/…
@freedomn-m：我正在使用 Visual Studio 2013

【解决方案2】：

您可以使用这样的方法，使用函数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");
  }
}

【讨论】：

【解决方案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();
  }
});

【讨论】：