こんにちは。
株式会社クラスアクトインフラストラクチャ事業部の大塚です。

少し前にHTMLのお勉強ということでサインアップ画面をHTML/CSSで作成してみました。
今回はこれにJavaScriptを組み込んで、入力が足りなかったときにダイアログ（≒ポップアップ）を出力させるようにしたいと思います。

コード

test.html

大きな変化はありませんが、各inputのrequiredを省いています。これを省いていないとJavaScriptではなくてこっちで入力が足りないとエラーを出してしまったためです。
また、JavaScriptのファイルを別で用意しているので、それを読み込ませるためにhead部分で記載しています。

test.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>formのテスト</title>
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
</head>

<body>
    <form action="" method="post" class="sign-up-group" id="sign-up-form">
        <div id="sign-up-icon">
            <img src="contact_user_add_user_new_user_icon_250756.png">
        </div>
        <h1 id="sign-up-title">Please Sign-up</h1>
        <div class="sign-up-form">
            <input type="text" id="username" autocomplete="on" placeholder="Username" class="sign-up-content">
        </div>
        <div class="sign-up-form">
            <input type="password" id="password" autocomplete="off" placeholder="Password" class="sign-up-content">
        </div>
        <div id="submit-form">
            <button id="sign-up-button" type="submit">Sign-up</button>
        </div>
    </form>
</body>

</html>

script.js

今回のテーマであるJavaScriptになります。

script.js

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('sign-up-form').addEventListener('submit', function (event) {
        var username = document.getElementById('username').value.trim();
        var password = document.getElementById('password').value.trim();

        if (username === '' || password === '') {
            alert('すべての必須フィールドに入力してください。');
            event.preventDefault(); 
        }
    });
});

コードのそれぞれの意味をメモっておきます。

event.preventDefault();
- Eventインターフェイスのメソッドで、アクションを通常通りに行うべきではないことを伝える。

alert('すべての必須フィールドに入力してください。');
- 任意のメッセージを含むダイアログ（≒ポップアップ）を表示させるもの。alertを指定するだけで表示されるのか・・・

var username = document.getElementById('username').value.trim();
var password = document.getElementById('password').value.trim();
- var usernameはusernameという変数を定義している
- document.getElementByIdは()内に一致する要素をHTMLから取得するみたい
- .valueとすることでテキストボックスに入力された値を取得するようです。
- .trimとすることでテキストボックスに入力された値の前後に空白があった場合、それを除去してくれるようです。

document.getElementById('sign-up-form').addEventListener('submit', function (event) {
- addEventListener(type, listenner)とは、ターゲットに特定のイベントが配信されるたびに呼び出される関数を定義するものらしい。typeがイベントの種類。listenerはそのイベントが発生した時に呼び出されるコールバック関数を指定するみたい。
  - type：今回はsubmit。このsubmitはHTMLのボタンでsubmitが指定しているやつだと。これを押すたびに、第二引数のlistenerを呼び出すということみたい。
  - listener：function(event)｛ ~ event.preventDefault(); } }を示す。submitが実行されるとこの部分を実行するよってことみたい。関数がマルっと入っているのが個人的に「変わった書き方な気がする」と思いました。
  - function(event)のeventはイベントオブジェクトを示す様子。今回の場合submitのことだと思う。よくわかりませんが第一引数が入っているのかな？

document.addEventListener('DOMContentLoaded', function () {
- DOMContentLoaded：HTML文書のパースが終了し、DOM（Document Object Model）が構築された時点で発生するイベントの様子。
  - パース：解析のこと。HTML文書を構造的な形式に変換し、その構造をプログラムが理解できる形にするプロセスらしい。Webスクレイピングの時もパースって言葉あったような・・・
  - DOM：Document Object Modelは、HTMLやXMLドキュメントなどのマークアップ言語と、JavaScriptや他のプログラミング言語からアクセスできるAPIを指すらしい。これにより、文書の構造や要素に対してプログラムから操作を行うことが可能。（Udemyより引用）

parseとかDOMとかってこういうことですかね？

実行結果

Sign-upを押下することでsubmitがキックされて、usernameとpasswordに入力された値がJavaScriptに取得されます（今回は空白ですが）
値が空白なのでIFの条件に引っ掛かり、alertが呼び出されスクショのようにダイアログが出力されつつ、submitの処理が中止されます。

余談

これって例えばユーザ名やパスワードが英語でないとだめ、みたいな条件を追加することが出来そうですね。
近いうちにやってみたいところ。。。！