如何檢查所有選擇選項的值是否為空？

Question

我有5選擇選項下拉菜單。 未來它將根據需求增加。 問題是，如果我選擇了最后一個元素，我就得到了正確的值。 其他元素未填充，僅為空。 如果任何元素的值為null，則應僅通過false。

這是我的代碼

<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 selectValidation() {
            var selectIsValid = true;
            $('.selectmenu').each(function(){
                if($(this).val()==='') {
                    selectIsValid = false;
                } else {
                    selectIsValid = true;
                }
            });
            console.log(selectIsValid);
            if(selectIsValid) {
            }
            return false;
        }

Answer 1

我認為一個更簡單的解決方案是計算.selectmenu元素內的空值數量：

$('.selectmenu').filter(function(){return $(this).val() == ''}).length

這是一個工作片段：

 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> 

Answer 2

下面的工作，只是不設置selectIsValid = true; 完全在您的循環中。 首先將其設置為true，然后在循環中僅在找到空值時將其設置為false。 循環之后，返回selectIsValid ，除非測試之一失敗，否則它將為true：

 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> 

Answer 3

基本上，一旦發現一個錯誤，就不會在乎其他。 您正在執行的操作會覆蓋后續檢查中的所有錯誤。 您想要這樣的東西：

function selectValidation() {
    $('.selectmenu').each(function () {
        if ($(this).val() === '') {
            // If you find any, bail immediately.
            return false;
        }
    });

    return true;
}

Answer 4

問題是在每個函數中，如果該特定選擇有效，則將selectIsValid設置為true。 這將覆蓋先前選擇的值。 您需要刪除else子句。

如果selectIsValid也被命名為allSelectsAreValid則代碼可能會更清晰allSelectsAreValid 。

Answer 5

問題是，如果返回false，它將重置表格。

function selectValidation() {
$('.selectmenu').each(function () {
    if ($(this).val() === '') {
       alert('please complete the form');
        // If you find any, bail immediately.
        return false;
    }
});

return true;

}