フォームの検証に関する問題Javascript

Question

私はブートストラップを使用していますが、2つの同じフォームがあります。 Google検索結果にフォーム送信を追加しようとしていますが、同じフォームの2つを含めると、同じIDが両方で同じであるために機能しません。これをどうすれば解決できますか？ Googleは "G"を探しているので、IDは同じである必要があります。私は2つのフォームを持っている理由は、それがモバイル上で異なって表示されているためです。メディアクエリの使用。以下は私のコードのおかげです。

<form name="globalSearch" class="navbar-form" role="search" form action="" onsubmit="return validateSearch()"> 
     <div class="input-group add-on"> 
      <input type="hidden" name="cx" value="" /> 
      <input type="hidden" name="cof" value="FORID:11;NB:1" /> 
      <input type="hidden" name="ie" value="UTF-8" /> 
      <input class="form-control" placeholder="Search entire site..." id="q" name="q" type="text"> 
      <div class="input-group-btn"> 
      <button class="btn btn-default btnSubmit" type="submit"> 
       <i class="glyphicon glyphicon-search"></i> 
      </button> 
      </div> 
     </div> 
</form> 

function validateSearch() { 
     if (globalSearch.q.value.length == 0) { 
      document.getElementById("q").value = "Enter a Value"; 
      document.getElementById("q").style.color = "red"; 
      return false; 
     } 
    } 

Answer 1

おそらく、プレースホルダを変更したいです、ユーザーはクエリーで入力するよりもテキストを削除する必要はありません。更新された機能をご覧ください。

function validateSearch() { 
    var q = document.getElementById('q'); 
    if (q.value.length == 0) { 
    q.setAttribute('placeholder', 'Enter search term') 
    q.style.borderColor = "red"; 
    return false; 
    } 
} 

Answer 2

2つの要素は同じIDを共有できません。いずれか、モバイルで異なるルックスを作るウェブサーバ（PHPの/ etc）側からのいずれかの形式を隠すため 使用のCSSスタイルのどちらかがどちらかのgetElementByIdをを使用してはいけない - 代わりに、jQueryのを使用します。

<form name="globalSearch" ... > 
<input name="q" data-input-type="desktop" id="q"> 
.. 
</form> 
<script> 
function validateSearch() { 

    var field = $("input[data-input-type="desktop"]'); 
    field.val("Enter value here..."); 
    field.css("color","red"); 
} 
</script>