JQueryの基本フォームポスト

Question

私はフォームを検証していますが、検証が渡されない場合でもフォームを投稿します。これをどうやって防ぐのですか？

<form action="/Account/Registration" method="get"> 
      <fieldset id="enterCode"> 
       <ul> 
        <li class="inputBlock"> 
         <input type="text" id="Code" name="Code" value=""> 

        </li> 
       </ul> 

      </fieldset> 
      <div class="submitBlock"> 
       <input type="submit" value="Send" class="button" onclick="validate();" /> 
      </div> 
     </form> 

     <script type="text/javascript"> 
      function validate() { 

       var val = $('#Code').val(); 

       if (val == "") { 
        alert("Please enter code"); 
       } 

       return false; 


       } 

     </script> 

Answer 1

私はこのようにそれを行うだろう：

<form action="/Account/Registration" method="get" id="registrationForm"> 
     <fieldset id="enterCode"> 
      <ul> 
       <li class="inputBlock"> 
        <input type="text" id="Code" name="Code" value=""> 

       </li> 
      </ul> 

     </fieldset> 
     <div class="submitBlock"> 
      <input type="submit" value="Send" class="button" id="submitButton" /> 
     </div> 
    </form> 

    <script type="text/javascript"> 
     $(function(){ 
      $('#submitButton').click(function(e){ 
      e.preventDefault(); 
      var val = $('#Code').val(); 
      if (val.length > 0) { 
       $('#registrationForm').submit(); 
       } 

      }); 
     }); 
    </script> 

Answer 2

あなたは発射からのイベントを提出するか、それが発射されたとき、むしろボタンのよりも、そのイベントにfalseを返すことで、それを止める停止する必要がありますクリックイベント。送信ボタンがバーンティングの例のように動作する方法を変更したり、送信イベントをフォーム自体にバインドしたりすることができます。

<form action="/Account/Registration" method="get" id="registrationForm"> 
    <fieldset id="enterCode"> 
     <ul> 
      <li class="inputBlock"> 
       <input type="text" id="Code" name="Code" value=""> 

      </li> 
     </ul> 

    </fieldset> 
    <div class="submitBlock"> 
     <input type="submit" value="Send" class="button" /> 
    </div> 
</form> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('#registrationForm').submit(function() { 
      var val = $('#Code').val(); 
      if (val == "") { 
       alert("Please enter code"); 
       return false; 
      } 
      return true; 
     }); 
    }); 
</script>