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>