Reputation: 2711
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
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
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