Sathya Sathya - 2 months ago 4
Javascript Question

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;
}

Answer

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>

Comments