Looking for a simple way to validate all required inputs, in a certain div. In other words make sure all required inputs within a certain div are not empty.
This following code which was found here, shows a way to check all inputs and make sure they aren't empty (including inputs with only spaces in them) on a given page.
I am trying to do the same thing. Just within a certain div and for all required inputs.
$("input").filter(function () {
return $.trim($(this).val()).length == 0
}).length == 0;
Looking for a simple way to validate all required inputs, in a certain div. In other words make sure all required inputs within a certain div are not empty.
This following code which was found here, shows a way to check all inputs and make sure they aren't empty (including inputs with only spaces in them) on a given page.
I am trying to do the same thing. Just within a certain div and for all required inputs.
$("input").filter(function () {
return $.trim($(this).val()).length == 0
}).length == 0;
3 Answers
Reset to default 4You could do the same thing, but you should change the selector to target just the input's inside a given div and add [required] selector to select just those who have required attribute :
$("div_selector input[required]").filter(function () {
return $.trim($(this).val()).length == 0
}).length == 0;
Hope this helps.
$('button').on('click',function(){
var result = $("#div_selector input[required]").filter(function () {
return $.trim($(this).val()).length == 0
}).length == 0;
console.log(result);
})<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input name='first' required> Required input out of the div
<div id='div_selector'>
<input name='second' required> Required input
<br>
<input name='Third'>
<br>
<input name='Fourth' required> Required input
</div>
<br>
<button>Check</button>Here's a simple one-liner using Array.reduce():
$(".your-div input").reduce((allFilled, input) =>
allFilled && $.trim($(input).val()) !== "", true)
This approach will match any input be it input, select, textarea etc
var canSubmit = true;
$.each($('.div-in-question').find(':input'), function(element, index){
canSubmit = canSubmit && ($(element).val() !== '');
});
// at this point canSubmit will be true or false and you can act upon it