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;
}
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;
}
- 3 Your function should stop iterating over select elements when you find first empty value. – Paweł Mikołajczyk Commented Sep 7, 2016 at 17:10
5 Answers
Reset to default 4I 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./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>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./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>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;
}
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.
The problem, if it returns false, it resets the form.
function selectValidation() {
$('.selectmenu').each(function () {
if ($(this).val() === '') {
alert('please plete the form');
// If you find any, bail immediately.
return false;
}
});
return true;
}