2010-11-09 6 views
0

J'ai un formulaire avec peu de champs et un bouton soumettre ... quand je clique sur le bouton soumettre le formulaire devrait valider et me jeter une erreur de données manquantes mais ce qui se passe est que, il affiche les données et valide le formulairevalider le formulaire et ensuite poster?

que dois-je faire pour valider le formulaire, puis poster le formulaire?

<body> 
    <form class="cmxform" id="commentForm" method="post" action=""> 
    <div class="subColumns paragraph"> 
      <div class="lefty"> 
       <div class="fontWeight7"> 
        <label for="first_name"> 
        First Name:</label> 
        <input id="first_name" class="text required" maxlength="200" 
         name="first_name" /> 
       </div> 
      </div> 
      <div class="cdc-left"> 
       <div class="fontWeight7"> 
        <label for="last_initial"> 
        Last Initial:</label> 
        <input id="last_initial" class="required text" maxlength="200" 
         name="last_initial" /> 
       </div> 
      </div> 
     </div> 
      <input id="btnRegister" name="btnRegister" class="submit" type="submit" value="Submit Your Answer" /> 
</form> 




<script type="text/javascript"> 

    $(document).ready(function() { 

     $("#commentForm").validate(); 

     // validate the comment form when it is submitted 
     // validate signup form on keyup and submit 
     $("#signupForm").validate({ 
      rules: { 
       firstname: "required", 
       lastname: "required", 
       username: { 
        required: true, 
        minlength: 2 
       }, 
       password: { 
        required: true, 
        minlength: 5 
       }, 
       confirm_password: { 
        required: true, 
        minlength: 5, 
        equalTo: "#password" 
       }, 
       email: { 
        required: true, 
        email: true 
       }, 
       topic: { 
        required: "#newsletter:checked", 
        minlength: 2 
       }, 
       agree: "required" 
      }, 
      messages: { 
       firstname: "Please enter your firstname", 
       lastname: "Please enter your lastname", 
       username: { 
        required: "Please enter a username", 
        minlength: "Your username must consist of at least 2 characters" 
       }, 
       password: { 
        required: "Please provide a password", 
        minlength: "Your password must be at least 5 characters long" 
       }, 
       confirm_password: { 
        required: "Please provide a password", 
        minlength: "Your password must be at least 5 characters long", 
        equalTo: "Please enter the same password as above" 
       }, 
       email: "Please enter a valid email address", 
       agree: "Please accept our policy" 
      } 
     }); 

     $("#commentForm").validate({ 
      submitHandler: PostData 
     }); 

    }); 

    function PostData() { 
    debugger 
    var _firstName = commentForm.first_name.value;// $('#first_name').value; //first_name.value; 
    var _lastName = $('#last_initial').value; //last_initial.value; 
    var _city = $('#city').value; //city.value; 
    var _state = $('#state').value; //state.value; 
    var _country = $('#country').value; //country.value; 

    } 

</script> 
+0

côté serveur de contrôle bien que ce soit cher, mais est plus fiable ... imaginez, l'utilisateur a choisi de désactiver javascript? – ajreal

+0

@ajreal - Je trouve une grande erreur dans votre logique, la validation côté client n'exclut pas la validation côté serveur, vous pouvez (et devriez, si vous faites le client) faire les deux. –

+0

la vérification côté client n'est pas possible SI sans javascript activé .. ou lorsque le javascript n'est pas chargé correctement ... bien sûr, avoir les deux vérifications est idéal – ajreal

Répondre

2

Vous êtes brancher le cas click sur le bouton, ce qui se produit avant l'événement submit sur la forme, au lieu d'utiliser le submitHandler callback option pour .validate(), comme ceci:

$("#commentForm").validate({ 
    submitHandler: PostData 
}); 

... et supprimer ce gestionnaire click complètement:

$('#btnRegister').click(function() { 
    PostData(); 
}); 

Le submitHandler ne exe cutes lorsque la validation a réussi, ce qui serait ce que vous voulez ici. Pourquoi ne pas faire la validation côté serveur en utilisant les contrôles de validation d'ASP.NET?

+0

@Nick: il a validé le formulaire, mais jamais exécuter le gestionnaire PostData et j'ai mis pause point dans les PostData. une idée? –

+0

@Abu - J'ai mal compris le nom, ça fait longtemps, assurez-vous que vous utilisez 'submitHandler' et non' successHandler', comme la réponse mise à jour –

+0

@Nick: j'ai changé pour submitHandler mais la même chose n'exécute pas PostData –

0

Il a l'avantage d'être plus difficile à remplacer, car la validation côté client peut être désactivée si l'utilisateur configure son navigateur pour qu'il ne s'exécute pas en JavaScript.

+0

Pourquoi ne pas faire les deux? :) –

+0

@Mathhew: je ne peux pas utiliser le côté serveur et j'utilise les services WCF sur la page html. –

Questions connexes