こんにちは！今日は表題の件について説明をしようと思います。

今回の仕様は以下の通り！
①送信ボタンをクリックする時に、必須項目が空だったりスペース（半角・全角）が入っている場合は
　JSでアラートを表示する
②アラートの該当項目はフォーカスさせるために、カーソルをあてる。

実際のソースがこちら！

$('#mailForm input:submit').click(function () {
            for ( i = 0; i < requiredItemIds.length; i++ ) {
                if ($(requiredItemIds[i]).val().match(/^[ 　\r\n\t]*$/)) {
                    alert('スペースのみを入力することはできません。');
                    console.log(requiredItemIds[i]);

                    $(requiredItemIds[i]).val('');
                    $(requiredItemIds[i]).focus();
                    return false;
                }
            }
        });

上記はサブミットした時に必須項目が「空orスペース」の場合はアラートを表示後、該当フィールドにフォーカスする設定方法です。

もしスペースの場合にのみ、アラートを表示し、該当フィールドにフォーカスしたい場合は以下に変更します。

$('#mailForm input:submit').click(function () {
            for ( i = 0; i < requiredItemIds.length; i++ ) {
                if ($(requiredItemIds[i]).val().match(/^[ 　\r\n\t]+$/)) {
                    alert('スペースのみを入力することはできません。');
                    console.log(requiredItemIds[i]);

                    $(requiredItemIds[i]).val('');
                    $(requiredItemIds[i]).focus();
                    return false;
                }
            }
        });

ん？どこが変わったのかって？

そう！ここが今回のミソです。

変わった箇所はこの一文。

if ($(requiredItemIds[i]).val().match(/^[ 　\r\n\t]*$/)) {

if ($(requiredItemIds[i]).val().match(/^[ 　\r\n\t]+$/)) {

『*$』を『+$』に変更するだけ。

これ、どういう意味かというと、そもそも

+$　　⇒　　1回以上の繰り返し
*$　　⇒　　0回以上の繰り返し
$　　⇒　　行末

といった意味を持っています。

で、例えば「あ[スペース]いうえお」と入力したときに行末にスペースはないけど
『*$』であれば行末にスペースがないのが0回以上の条件に当てはまるので何らかの配列を返しますよ！となってします。

なので、空欄の場合でもスペースのみの場合でも0回以上という解釈で配列がまわる。

ただ、『+$』だと「1回以上の繰り返し」という条件になるため「あ[スペース]いうえお」と入力したときは
行末にスペースがない、と判断しNULLとなります。

細かな違いでデザイナーにはすごく難しい笑
今回はプログラマーさんに教えてもらいながら進めました！
ありがとうございます！

• blog,
• code,
• javascript