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

こんにちは、ryohei(@ityryohei)です!

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

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

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

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

フォームを作成する

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

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のどちらかを入力必須にする方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。