javascript関数は一度しか動作しません

Question

私は、連絡先フォームの検証にjavaスクリプトを使用しようとしています。 アイデアは、各テキストボックスの上に段落タグを追加することです。送信ボタンをクリックすると、javascript関数が起動されます。 テキストボックスが空の場合、「隠された」クラスが段落のクラスリストから削除され、表示されます。 問題は、初めてボタンをクリックしたときに関数が1回だけ起動されることです。しかし、テキストボックスを塗りつぶしてもう一度クリックすると、関数は起動されません。 どのような身体も私に助けてくれますか？ 注：getElementByIdを使用すると、関数は起動されず、コンパイラはサーバ側の関数btnSubmit_Clickに移動しますが、getElementByNameを使用すると、関数は上記のように1回だけ起動されます。

 <div id="contactForm" runat="server"> 
      <div class="control-group form-group"> 
       <div class="controls"> 
        <p id="errname" class="hidden">You must insert your <b>name</b></p> 
        <input type="text" runat="server" class="form-control" id="txtname" name="txtname" placeholder="*Full Name" > 
       </div> 
      </div>    
      <div class="control-group form-group"> 
       <div class="controls"> 
        <p id="erremail" class="hidden">You must insert your <b>email</b></p> 
        <input type="email" runat="server" class="form-control" id="txtemail" name="txtemail" placeholder="*Email" > 
       </div> 
      </div> 
      <div class="control-group form-group"> 
       <div class="controls"> 
        <p id="errmessage" class="hidden">You must insert a <b>message</b></p> 
        <textarea runat="server" rows="10" cols="100" class="form-control" id="txtmessage" name="txtmessage" placeholder="*Message" maxlength="999" style="resize:none"></textarea> 
       </div> 
      </div> 
      <asp:Button ID="btnSubmit" runat="server" OnClientClick="return myfun();" OnClick="btnSubmit_Click" Text="Send Message" class="btn btn-primary btn-block" /> 
     </div> 

とJavaScript関数は次のとおりです。

function myfun() { 
     document.getElementById("errname").classList.add('hidden'); 
     document.getElementById("erremail").classList.add('hidden'); 
     document.getElementById("errmessage").classList.add('hidden'); 

     var flag = true; 
     if (!document.getElementsById("txtname").value) { 
      document.getElementById("errname").classList.remove('hidden'); 
      flag= false; 
     } 

     if (!document.getElementsById("txtemail").value) { 
      document.getElementById("erremail").classList.remove('hidden'); 
      flag= false; 
     } 

     if (!document.getElementsById("txtmessage").value) { 
      document.getElementById("errmessage").classList.remove('hidden'); 
      flag = false; 
     } 
     if (flag == false) { return false;} 

    } 
</script> 

Answer 1

それはあなたのJSが

    <input type="text" runat="server" class="form-control" id="txtname" name="txtname" placeholder="*Full Name" clientIdMode="static"> 

Answer 2

javascript関数で呼ばれているテキストボックスに= "静" のClientIDModeをすることができます追加することによって行われます決して真実を返しません。あなたは持っています：

if(flag == false) {return false;} 

しかし、決して真実を返すように言わないでください。代わりに、ラインの上で、なぜだけでなく：

エラーがあります場合は、値をtrueからfalseに変更しているので

return flag; 

、それはflagの値は何でも返します。