JQuery poste de base post

Question

Je valide un formulaire mais lorsque la validation n'est pas passée il publie toujours le formulaire. Comment puis-je empêcher cela?

<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

Je ferais comme ça:

<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

Vous devez arrêter le soumettre un événement de tir, ou lorsqu'il est tiré, arrêter en retournant faux sur cet événement plutôt que le bouton de cliquez sur l'événement. Vous pouvez modifier le comportement de votre bouton de soumission dans l'exemple de bunting ou lier un événement submit au formulaire lui-même.

<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>