Biker John
Biker John

Reputation: 2711

Check if form has at least one filled / checked / selected element

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();

  }

});

Upvotes: 0

Views: 85

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33943

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>

Upvotes: 1

Samuli Hakoniemi
Samuli Hakoniemi

Reputation: 19059

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'));

Upvotes: 2

Related Questions