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();
}
});
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'));
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.