検索とメッセージフィールドの入力を確認するjquery

Question

送信ボタンが情報を送信する前に、メッセージ入力エリアが入力されていることを確認するためにjqueryコードを書き込もうとしています。フィールドが入力されていない場合、警告アラートボックスが表示されます。それが記入されている場合は、ありがとう警告ボックスがポップアップ表示されます。

I can get an alert box to work with: if ($("#search").val() == "") alert ("Empty!"); 

but I can not get the alert boxes I created to pop up. Can anyone see where I am going wrong? 

     HTML 

     <form id="contact" method="post" action=""> 
     <!--search for person--> 
     <div> 
     <input type="text" id="search" name="search" placeholder=" Search for   
      User"> 
     </div> 


     <button id="sendButton">SEND</button> 

     <div id="sendAlertText"> 
      <p>Your message has been sent </p> <p id="sentCross">&#10006;</p> 
      </div> 

     <div id="emptyAlertText"> 
      <p>You need to complete all sections before you can send your 
       message</p> <p id="sentCross2">&#10006; 
       </p> 
      </div> 

      </form> 


     CSS 

     #sendAlertText, #emptyAlertText { 
     display: none; 
     display:block; 
     position:relative; 
     margin: 0 20px; 
     z-index: 98; 
     height: 100px; 
     width: 250px; 
     background-color: red; 
     text-align: center; 
     font-size: 1.5em; 
    } 

    #sentCross { 
     position: absolute; 
     top: -20px; 
     right: 2%; 
    } 

    #emptyAlertText { 
     background-color: green; 
    } 



     JQuery 

     $(document).ready(function() { 

    // MESSAGE INPUT CAN NOT BE BLANK // 

    // Hide the alert messages 

    $("#sendAlertText").hide(); 
    $("#emptyAlertText").hide(); 


    $("#sendButton").click(function() { 
     if ($("#search").val() == "") { 
      $("#emptyAlertText").fadeIn("slow"); 
     } else { 
      $("#sendAlertText").fadeIn("slow"); 
     } 


    }); 
    } 

Answer 1

ボタンのようなイベントをデフォルトの動作にしないようにするには、次のようにします。この場合、ページはリロードされません：

$("#sendButton").click(function(event) { 
    if ($("#search").val() == "") { 
     event.preventDefault(); 
[...] 

もう一つのヒントは、ボタンのタイプ属性を宣言することです。これを行うと、ボタンにはもうデフォルト動作がありません。

<button id="sendButton" type="button">SEND</button>