JavaScriptで実装してて思ったこと_1

by opengl_8080

HTML

<div>
    姓名：
    苗字<input id="family-name" type="text" />
    名前<input id="first-name" type="text" />
</div>
<div>
    年齢：<input id="age" type="text" />
</div>
<div>
    性別：
    <label>
        男<input name="sex" type="radio" value="male" />
    </label>
    <label>
        女<input name="sex" type="radio" value="female" />
    </label>
</div>
<div>
    連絡先：
    <label>
        不要<input name="contact" type="radio" value="unnecessary" checked />
    </label>
    <label>
        必要<input name="contact" type="radio" value="necessary" />
    </label>
    メールアドレス：<input id="mail-address" type="text" disabled />
</div>
    
<button id="submit">送信</button>

CSS

div {
    margin-bottom: 10px;
}

input[type="text"] {
    width: 100px;
}

JavaScript

// 連絡先ラジオボタンの切り換えイベントハンドリング
$('[name="contact"]').change(function() {
    var selected = $('[name="contact"]:checked').val();
    if (selected === 'unnecessary') {
        $('#mail-address').attr('disabled', true);
    } else {
        $('#mail-address').attr('disabled', false);
    }
});

// 送信ボタンクリックのイベントハンドリング
$('#submit').click(function() {
    // 名前の必須入力チェック
    var familyName = $('#family-name').val();
    if (!familyName) {
        alert('苗字は必須入力です。');
        return;
    }
    
    var firstName = $('#first-name').val();
    if (!firstName) {
        alert('名前は必須入力です。');
        return;
    }
    
    // 年齢の必須入力チェック
    var age = $('#age').val();
    if (!age) {
        alert('年齢は必須入力です。');
        return;
    }
    
    // 年齢の数値チェック
    if (!$.isNumeric(age)) {
        alert('年齢は半角数値で入力してください。');
        return;
    }
    
    age = age - 0;
    
    if (age < 0 || 150 < age) {
        alert('年齢は 0 以上 150 以下で入力してください。');
        return;
    }
    
    // 性別入力チェック
    var sex = $('[name="sex"]:checked').val();
    
    if (!sex) {
        alert('性別を選択してください。');
        return;
    }
    
    // 連絡先必須入力チェック
    if ($('[name="contact"]:checked').val() === 'necessary') {
        var mailAddress = $('#mail-address').val();
        
        if (!mailAddress) {
            alert('メールアドレスを入力してください。');
            return;
        }
        
        if (!mailAddress.match(/^[a-zA-Z0-9@._-]+$/)) {
            alert('メールアドレスは半角英数記号で入力してください。');
            return;
        }
    }
    
    var input = {
        familyName: familyName,
        firstName: firstName,
        age: age,
        sex: sex,
        mailAddress: mailAddress
    };
    
    console.dir(input);
});