mutiple <select>要素検証でフォームの提出が複雑になる

Question

私が作成したサンプルフォームには、ユーザーの生年月日でフォーム検証を実行しているため、3つの<select>アイテムしか含まれていません。 3 <select>のいずれかの項目にも値がない場合は、フォームはpreventDefault()となります。それ以外の場合はreturn trueとなります。私のjavascriptファイルで

HTML

<form action="" method="post"> 
    <select name="month" id="month"> 
    <option value="">Month</option> 
    <option value="January">January</option> 
    <option value="February">February</option> 
    <option value="March">March</option> 
    </select> 
    <select name="day" id="day"> 
    <option value="">Day</option> 
    <option value="1">1</option> 
    <option value="2">2</option> 
    <option value="3">3</option> 
    </select> 
    <select name="year" id="year"> 
    <option value="">Year</option> 
    <option value="">2000</option> 
    <option value="">2001</option> 
    <option value="">2002</option> 
    </select> 
    <input type="submit" value="Submit"> 
</form> 

、私は2つの選択肢があったが、両方が正常に実行に失敗しました。オプション1では

オプション1

function validate(e) { 
    var selectItems = document.querySelectorAll('select'); 

    selectItems.forEach(function(item) { 
    if(!item.value) { 
     e.preventDefault(); 
    } else { 
     return true; 
    } 
    }) 
} 

document.querySelector('form').addEventListener('submit', validate); 

オプション2

function validate(e) { 
    var month = document.querySelector('#month'); 
    var day = document.querySelector('#day'); 
    var year = document.querySelector('#year'); 

    if(!month.value && !day.value && !year.value) { 
    e.preventDefault(); 
    } else { 
    return true; 
    } 
} 

document.querySelector('form').addEventListener('submit', validate); 

、私が持っていた問題だった、三つの項目がすでに完了しているものの、フォームはまだ本当返しません。

オプション2では、3つのアイテムのいずれかがすでに値を持っていて、他の2つが値を持たず、フォームを送信するとtrueを返します。

どうすればよいですか？

Answer 1

これは動作するはずです：

function validate(e) { 
 
    var selectItems = Array.from(document.querySelectorAll('select')); 
 

 
    if (selectItems.some(item => !item.value)) { 
 
    e.preventDefault(); 
 
    } else { 
 
    return true; 
 
    } 
 
} 
 

 
document.querySelector('form').addEventListener('submit', validate);

<form action="" method="post"> 
 
    <select name="month" id="month"> 
 
    <option value="">Month</option> 
 
    <option value="January">January</option> 
 
    <option value="February">February</option> 
 
    <option value="March">March</option> 
 
    </select> 
 
    <select name="day" id="day"> 
 
    <option value="">Day</option> 
 
    <option value="1">1</option> 
 
    <option value="2">2</option> 
 
    <option value="3">3</option> 
 
    </select> 
 
    <select name="year" id="year"> 
 
    <option value="">Year</option> 
 
    <option value="2000">2000</option> 
 
    <option value="2001">2001</option> 
 
    <option value="2002">2002</option> 
 
    </select> 
 
    <input type="submit" value="Submit"> 
 
</form>