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

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

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

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

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

フォームを作成する

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();
    }
});

実行結果を確認します。

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

2つのinputのどちらかを入力しなければ送信できない状態になっています。

最後に

本記事でご紹介した内容は、連絡先の入力を促したい場合に便利な方法です。アンケートでメリット・デメリットのどちらかを入力して欲しい場合にも良いかもしれません。

ここでは省略していますが、実際のフォームで使用する場合は、入力内容に応じたバリデーションチェックが必要です。フロントエンド、バックエンドどちらでも必須の処理となりますので、実装を忘れないように注意してくださいね。

以上、JavaScriptで2つのinputのどちらかを入力必須にする方法のご紹介でした！