JavaScriptの入力チェックで悩んだ

2019/07/25(木)JavaScriptの入力チェックで悩んだ

2019/07/25 24:28 itoy

select/option で必須入力のチェックを JavaScript で行おうとしました
そこで少しハマりました

HTMLは下記になります(よくある都道府県のプルダウンです)

<select class="custom_select" name="prefectures" id="prefectures" >
    <option selected>お届け先の都道府県を選択してください</option>
    <option value="北海道">北海道</option>
    <option value="青森県">青森県</option>
    <option value="岩手県">岩手県</option>

最初は下記の JavaScript でチェックしました

if (document.req.prefectures.value == '' ) {
    window.alert('都道府県を入力してください');
    return false ;
}

都道府県を選択しない状態でも、JavaScriptに引っかかりません
デバッグしていくと、チェックの方法がおかしいのか? と考えて下記のコードへ修正しました
やはり引っかかりません

var prefectures =  document.getElementById("prefectures") ;
if ( prefectures.value == '') {
    window.alert('都道府県を入力してください');
    return false ;
}

よくよく調べていくと prefectures.value に何か設定されているようです
下記のコードで正しく動作しました

var prefectures =  document.getElementById("prefectures") ;
if ( prefectures.value == 'お届け先の都道府県を選択してください') {
    window.alert(prefectures.value);
    return false ;
}

プルダウンで都道府県をしていない状態では selected の文字列("お届け先の都道府県を選択してください")
が設定されていました
：
：
完全に無知です