【JavaScript】2つのinputのどちらかを入力必須にする

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptで2つのinputのどちらかを入力必須にする方法をご紹介しています。1つは入力必須ですが、両方入力することもできる状態にしておきます。

JavaScriptでフォームの2つのinputのうち、両方入力できてどちらかを入力必須にしたいな。良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

フォームを作成する

HTMLでフォームを作成します。フォームには連絡先というグループに電話番号とメールアドレスを入力するinputを設置します。inputのどちらも入力されていない場合にJavaScriptでエラーメッセージを出力します。エラーを出力する箇所にerrorのclassを持たせた要素を設置します。

HTML

<form action="" method="post">
    <fieldset>
        <legend>連絡先</legend>
        <label>電話番号：<input type="tel" name="tel" value=""></label>
        <label>メールアドレス：<input type="email" name="email" value=""></label>
        <div class="error"></div>
    </fieldset>
    <button>送信する</button>
</form>

以上でフォームの準備は完了です。

フォームを取得する

JavaScriptで前項で作成したフォームを取得します。フォームの取得にはformsプロパティを使用します。

JavaScript

const form = document.forms[0];

formsプロパティについては下記ページで詳しくご紹介していますので、あわせてご参照ください。

フォームの2つのinputのどちらかを入力必須にする

取得したフォームのsubmitイベントが発生した際に、inputの値を取得し、連絡先のどちらも入力されていない（値が空）の場合にsubmitを中止し、エラーメッセージを出力します。

JavaScript

//フォームを取得する
const form = document.forms[0];
//エラーメッセージを出力する要素を取得する
const error = document.querySelector('.error');

//フォームのsubmitイベント発生時に処理開始
form.addEventListener('submit', ()=>{
    
    //電話番号の値を取得する
    let tel = event.target.tel.value;
    //メールアドレスの値を取得する
    let email = event.target.email.value;
    
    //電話番号・メールアドレスが空であれば
    if(tel === '' && email === ''){
        //エラーメッセージを出力する
        error.textContent = '※連絡先を入力してください';
        //submitイベントを止める
        event.preventDefault();
    }
});

実行結果を確認します。