Out of 8 textbox at least one should be filled using jQuery

Question

I have 8 textbox for which I want to set at least one textbox should be mandatory using jQuery on button click.

Below is my 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>

Below is my jQuery code for validation but it checks all the textbox for validation. If any one of those is filled then it's OK, otherwise prompt an error.

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

score 1 · Answer 1 · answered Aug 14 '20 at 07:37

To find an input which does not have a value within a set you could use filter().

However you should note that you code has a lot of repetition and can be DRY'd up by using a common class and a data attribute to hold the validation message for each input. Also note that inline event handlers (ie. the onX attributes) are not good practice and should be avoided. As you're already using jQuery you can use it to attach unobtrusive event handlers, like this:

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>

Ignore the JS linter in Visual Studio, it's terrible - even when set to use ESLiint. If you run this in a modern browser it will work fine, as you can see in the example above — Rory McCrossan, Aug 14 '20 at 07:57
@hud which version of visual studio? VS 2015/2017: https://stackoverflow.com/a/54708143/2181514 VS 2013: https://stackoverflow.com/questions/24034668/how-to-use-ecmascript-6-syntax-with-visual-studio-2013 — freedomn-m, Aug 14 '20 at 09:05

score 0 · Answer 2 · answered Aug 14 '20 at 07:59

You can use an approach like this, using 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");
  }
}

score 0 · Answer 3 · answered Aug 14 '20 at 08:01

Please see below how you can check if all the inputs are selected. By filtering the inputs based on their value(empty) and counting them, we can display the error only if there is no input filled. The code below use ES5 since your environment does not recognize ES6 syntax (based on comment under the answer of @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();
  }
});

Out of 8 textbox at least one should be filled using jQuery

3 Answers3