Out of 8 textbox atleast one should be filled using jquery

I have 8 textbox for which I want to set atleast 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. Kindly help if any one of those is filled than its 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; } 
Add Comment
3 Answer(s)

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();   } }); 
Answered on August 30, 2020.
Add Comment

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>

Add Comment

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");   } } 
Answered on August 30, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.