javascriptを使って２つの検索フォームの空検索を禁止する方法

Question

現在ページに検索フォームを２つ入れています。１つの場合は下記のようなコードで問題なかったのですが２つの場合だとうまく行きません。

<script>
function search(){
  if (document.forms[0].searchword.value == "") {
    alert("文字が入力されていません。");
    document.forms[0].searchword.focus();
    return false;
  }
  return true;
}
</script>
<form action="sample.php" method="post" onsubmit="return search()">>
<input class="...." type="text" name="searchword" id="searchword">
<input type="submit" value="検索する">
</form>

今回実装しているのは下記になります。
単純にもう１つの方のformにonsubmit="return search()"を追加したりしても最初のformが空のままなのでアラート表示が出てきてしまいます。こういう場合どうすればいいのでしょうか。お願いします。

<script>
function search(){
  if (document.forms[0].searchword.value == "") {
    alert("文字が入力されていません。");
    document.forms[0].searchword.focus();
    return false;
  }
  return true;
}
</script>
<form action="sample.php" method="post" onsubmit="return search()">>
<input class="...." type="text" name="searchword" id="searchword">
<input type="submit" value="検索する">
</form>

....

<form action="sample1.php" method="post">
<input class="...." type="text" name="keyword" id="keyword">
<input type="submit" value="検索する">
</form>

Answer 1

あ・・・searchwordとkeywordなんですね・・・直します。

もっとも簡単な方法ですが、

<script>
function search(obj){
  var target = (obj.searchword) ? obj.searchword : obj.keyword;
  if (target.value == "") {
    alert("文字が入力されていません。");
    target.focus();
    return false;
  }
  return true;
}
</script>
<form action="sample.php" method="post" onsubmit="return search(this)">>
<input class="...." type="text" name="searchword" id="searchword">
<input type="submit" value="検索する">
</form>

....

<form action="sample1.php" method="post" onsubmit="return search(this)">>
<input class="...." type="text" name="keyword" id="keyword">
<input type="submit" value="検索する">
</form>
```とすることですかね。

Answer 2

<form action="sample.php" method="post" onsubmit="return search()">
<input class="...." type="text" name="searchword" id="searchword" required>
<input type="submit" value="検索する">
</form>

テキストボックスの入力必須はrequiredで処理するくらいが妥当じゃないですか？
あまり厳密にやっても、結局サーバーの受けっ取った側でもバリデートはやる必要があるので
あくまでもクライアント側でやるのはユーザーの入力補助でしかないので

Comments

[退会済みユーザー]

コメントありがとうございます。ご指摘の通り少しこだわり過ぎていたかもしれません。必要な機能かどうか検討してみます。