检查表单是否至少有一个填充/选中/选定的元素

Question

I would like to check if at least one of form's items has been filled / checked / selected. Form uses input fields, checkboxes and radio buttons. At least one of the items should be selected / filled / checked for the form to proceed.

My solution is the following:

$('#subform').submit(function(e){

  els = $('.filter_ext[type="text"], .filter_ext[type="radio"]:checked, .filter_ext[type="checkbox"], select.filter_ext');
  empty_count = 0;

  els.each(function(){
    th = $(this);
    cur_val = th.val();

    if(cur_val=='' || !th.checked) {
      th.prop('disabled', true); // omit empty items from url get variables (nicer url)
      empty_count ++;
    }
  });

  if(empty_count == els.length) { // if all are empty stop form submit
    e.preventDefault();
  } // else proceed with submitting form

});

Is there a more elegant way to solve this?

EDIT Thanks to Louys Patrice Bessette 's answer, I simplified with the following code (adding the disablement to his solution):

var serialized_orig = $('#subform').serialize();
$('#subform').submit(function(e){

  th = $(this);
  serialized = th.serialize();

  $.each(serialized.split('&'),function(i,v){

    item = v.split('=');
    item_name = item[0];
    item_value = item[1];

    if(item_value == '') {

      $('.filter_ext[name="'+item_name+'"]').prop('disabled', true);

    }

  });

  if(serialized == serialized_orig) {

    e.preventDefault();

  }

});

Answer 1

You could use Array.some() for detecting that at least one of the elements in the collection contains the condition. I wrote a vanilla JS example for you - feel free to evaluate it: https://codepen.io/zvona/pen/ywoJxg

It'd look something like this in jQuery (not tested):

const isValid = $('.formElem').some(($elem) => $elem.val().length || $elem.attr('checked'));

Answer 2

Usually, form validation will have a close look at all required fields to be filled...
It is based on an AND logic...

Now, your question is something quite unusual:

if at least one of form's items has been filled / checked / selected.

That is an OR logic!

So I came up with a funny idea...
What if on submit , you compare the serialised form data with an "original unfilled" one?

Just make sure to have a name attribute on each elements...

 // Original unfilled form data var initialFormValues = $("#subform").serialize(); $("#subform").on("submit",function(e){ if( $(this).serialize() == initialFormValues ){ // Is form data changed? e.preventDefault(); console.log("Not submitted"); }else{ e.preventDefault(); // Just for that snippet! remove that for real. console.log("Submitted"); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form id="subform"> <input type="text" name = "text"><br> <input type="checkbox" name="checkbox"><br> <input type="radio" name="radio">1<br> <input type="radio" name="radio">2<br> <select name="select"> <option value="" disabled selected>Choose</option> <option value="1">1</option> <option value="2">2</option> </select><br> <br> <input type="submit" value="Submit"> </form>