Sathya
Reputation: 1734
How to check all select option value is not an empty?
I'm having 5 select option drop down menu. Future it will get increase based on the requirement. The problem is if i select last element i'm getting the value is true. Other elements not filled, it is empty only. It should through false only, if anyone element value is null.
This is my code
<form name="selectForm" action="" onSubmit="return selectValidation();" method="POST">
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<button type="submit" class="btn">
<i class="fa fa-btn fa-user"></i> Submit Answers
</button>
</div>
</form>
Javascript function
function selectValidation() {
var selectIsValid = true;
$('.selectmenu').each(function(){
if($(this).val()==='') {
selectIsValid = false;
} else {
selectIsValid = true;
}
});
console.log(selectIsValid);
if(selectIsValid) {
}
return false;
}
Upvotes: 3
Views: 14550
Answers (5)
JTJohnston
Reputation: 95
The problem, if it returns false, it resets the form.
function selectValidation() {
$('.selectmenu').each(function () {
if ($(this).val() === '') {
alert('please complete the form');
// If you find any, bail immediately.
return false;
}
});
return true;
}
Upvotes: 0
Dekel
Reputation: 62676
I think that a much simpler solution is to count the number of empty values you have within the .selectmenu elements:
$('.selectmenu').filter(function(){return $(this).val() == ''}).length
Here is a working snippet:
function selectValidation() {
var emptyvalues = $('.selectmenu').filter(function(){return $(this).val() == ''}).length;
if (emptyvalues) {
return false;
}
return true;
}
$('#btn').click(function() {
console.log($('.selectmenu').filter(function(){return $(this).val() == ''}).length)
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="selectForm" action="" onSubmit="return selectValidation();" method="POST">
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<button type="submit" class="btn">
<i class="fa fa-btn fa-user"></i> Submit Answers
</button>
</div>
</form>
<br /><br />
<button id="btn">count empty</button>Upvotes: 4
Wesley Smith
Reputation: 19571
The below would work, just dont set selectIsValid = true; at all in your loop. Set it to true to begin with, then in the loop only set it to false if you find an empty value. After the loop, return selectIsValid, it'll be true unless one of the tests failed:
function selectValidation() {
var selectIsValid = true;
$('.selectmenu').each(function() {
if ($(this).val() === '') {
selectIsValid = false;
return; // skip remaining checks
}
});
return selectIsValid;
}
$('#test').click(function() {
console.log(selectValidation());
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="selectForm" action="" onSubmit="return selectValidation();" method="POST">
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<select class="selectmenu">
<option value="">Select the value</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</div>
<div>
<button type="submit" class="btn">
<i class="fa fa-btn fa-user"></i> Submit Answers
</button>
</div>
</form>
<button id="test">test
<button>Upvotes: 2
frodo2975
Reputation: 11783
The problem is that in your each function, you set selectIsValid to true if that particular select is valid. This overwrites the value for previous selects. You need to remove the else clause.
The code could be a bit clearer if selectIsValid was named allSelectsAreValid also.
Upvotes: 0
krillgar
Reputation: 12815
Basically, once you find one that is false, you don't care about the others. What you were doing overwrites any falses with the subsequent checks. You want something like this:
function selectValidation() {
$('.selectmenu').each(function () {
if ($(this).val() === '') {
// If you find any, bail immediately.
return false;
}
});
return true;
}
Upvotes: 0
Related Questions
- How to check with jquery if select has options?
- All Select list options with a class and value not blank using jQuery
- Ensure Multiple Select Element Has Non Empty Option Selected
- jQuery - Check If any select option is selected or all selects options unselected
- Loop through all the elements of select and add a blank option if the either of the items is null
- Check if all dropdowns are empty or not jQuery
- jQuery do something when select options' values are not empty/NULL
- Best way (with jQuery) to check that an empty <option> is not selected
- Determine if SelectBox containing no options exists using jQuery
- How to show alert if multiple option values are empty