![coding_image](https://i1.wp.com/thunderra1n.ellpedia.com/wp-content/uploads/2017/09/business-1839876_640-300x200.jpg?w=400)
今回はテキストフォーム、つまり<input type=”text”>で入力内容が未入力だったり、スペースキーによる空白のみの場合、その内容をsubmit/送信しない方法を紹介します。半角・全角スペースともに対応できます。
まず以下のようにformタグがinputタグを内包しているとします。(後々書き加える部分があるので注意。属性値も環境に応じて書き換えてください)
1 2 3 4 |
<form id="search_form" name="search_form" method="get" action="abc.php" onsubmit=""> <input type="text" id="text_form" name="q"> <input type="submit" value="送信"> </form> |
ここでJavaScriptのコードを用意します。
1 2 3 4 5 6 7 8 |
function check(){ var a=document.search_form.q.value; if(a==""){ return false; }else if(!a.match(/\S/g)){ return false; } } |
document.(formのname属性値).(input textのname属性値).value
でテキストフォームの入力内容を取得しています。これはid属性値でも取得可能です。
そしてif文で未入力や空文字の判定を行うという流れになります。
上記のようなスクリプトが準備できたらhtmlのformタグのonsubmit属性に
onsubmit=”return check()”
と入力します。check()は上記スクリプトの関数名で、変更した場合は書き換えてください。
このようにするとsubmit時にcheck関数によって空白判定が行われ、条件に引っかかった場合
onsubmit=”false”
となってsubmitが実行されなくなります。