テキストフォームの入力内容が空白(未入力やスペース)の時submitしない方法

今回はテキストフォーム、つまり<input type=”text”>で入力内容が未入力だったり、スペースキーによる空白のみの場合、その内容をsubmit/送信しない方法を紹介します。半角・全角スペースともに対応できます。

まず以下のようにformタグがinputタグを内包しているとします。(後々書き加える部分があるので注意。属性値も環境に応じて書き換えてください)

<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>

</form>

ここでJavaScriptのコードを用意します。

function check(){
  var a=document.search_form.q.value;
  if(a==""){
    return false;
  }else if(!a.match(/\S/g)){
    return false;
  }
}

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が実行されなくなります。

共有:

関連記事