ASP.Net MVC 2 - Validation jQuery et formulaire Submit - DataAnnotations

Question

J'ai un exemple d'application, essayant d'apprendre la validation de jQuery et de soumettre un formulaire dans ce scenerio.

La page comporte une zone de texte (EnvelopeID par enveloppe de classe). Si vous cliquez sur le bouton Soumettre et que la zone de texte est vide, je veux afficher un message d'erreur. Si ce n'est pas vide, je veux envoyer une requête ajax à GetData Action. L'action renvoie des vues partielles (valeur 1 ou 2) ou une chaîne d'erreur.

Problème:

1. validation du client ne se produit pas ici.
2. Comment puis-je faire $(form).submit pour adhérer à la validation de jquery et ne pas publier les données si elles sont vides? Je peux vérifier que la zone de texte est vide ou non avant de poster (manuellement) mais je veux utiliser la bonne façon.

Ce même exemple fonctionne avec MSAjax et la validation sans aucun problème.

Page Master Chef

<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-1.4.1.min.js") %>"></script> 
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.validate.min.js") %>"></script> 
<script type="text/javascript" src="<%= Url.Content("~/Scripts/MicrosoftMvcJQueryValidation.js") %>"></script> 

Classe:

namespace PartialViews.Models 
    { 
     public class Envelope 
     { 
      [Required(ErrorMessage="Envelope ID is required!")] 
      public string EnvelopeID { get; set; } 
     } 
    } 

Action données:

[HttpPost] 
public ActionResult GetData(Envelope envelope) 
{ 
    ActionResult result = null; 
    if (ModelState.IsValid) 
    { 
     Information myInfo = newInformation(); 
     if (envelope.EnvelopeID == "1") 
     { 
      result = View("TQ1PV", myInfo); //partial view 
     } 
     elseif (envelope.EnvelopeID == "2") 
     { 
      result = View("TQ2PV", myInfo); //partial view 
     } 
     else 
     { 
      result = Content("Error"); 
     } 
    } 
    else 
    { 
     result = View("index", envelope); 
    } 
    return result; 
} 

Action Index:

public Action Result Index() 
{ 
    return View(); 
} 

JS sur View - Index

<script type="text/javascript"> 
    $(function() { 
     //onload 
     $("#evid").focus(); 
     $("form[name='EVIDForm']").submit(function() { 
      var action = $(this).attr('action'); 
      var evid = $("#evid").val(); 
      var tdata = $(this).serialize(); 
      alert(tdata); 
      $message = $("#resultDiv"); 
      $message.html('').removeClass("red"); 
      $.ajax({ 
      cache: false, 
      type: "post", 
      url: action, 
      data: tdata, 
      dataType: "html", 
      error: function (xhr, ajaxOptions, thrownError){ 
        alert('system error'); 
       }, 
       success: function(data){ 
      if (data == 'Error') 
         $message.html("No such EV ID found!").addClass("red"); 
        else 
         $message.html(data); 
      } 
     }); 
      return false; 
     }); 
    }); 

</script> 

HTML sur View - Index:

<% Html.EnableClientValidation(); %> 
    <%= Html.ValidationSummary() %> 

    <% using (Html.BeginForm("GetData", "Info", FormMethod.Post, new {name = "EVIDForm" })) 
     {%> 
     <%= Html.LabelFor(model => model.EnvelopeID) %> &nbsp;&nbsp; 
     <%= Html.TextBoxFor(model => model.EnvelopeID, new { maxlength = "8"})%> 
     <%= Html.ValidationMessageFor(model => model.EnvelopeID,"*") %> 
     <br /><br /> 


     Correct EVIDs are 1 and 2. All other entries will result in an error. 
     <br /><br /> 
     <input type="submit" value="submit" /> 
    <%} %> 
    <div id="resultDiv" style="margin-top: 20px;"></div> 

Merci

Answer 1

Je suggère vous de faire quelque chose que je viens de décrire here

Answer 2

http://geekswithblogs.net/stun/archive/2010/02/27/asp.net-mvc-client-side-validation-summary-with-jquery-validation-plugin.aspx

Et si vous voulez voir le javascript complet, j'ai ma version affichée dans une question que j'ai posté jquery.validate lost on ajax replacement and only showing last error

Voici comment faire fonctionner avec le résumé de validation, mais peut-être qu'il peut vous aider à comprendre votre problème. Je sais que si vous référencez le javascript de validation de microsoft et les fichiers javascript jquery de validation, ils causeront des problèmes entre eux.

Answer 3

Peut-être que vous pouvez utiliser pour valider tous les champs d'entrée:

Simple but powerful jquery form validation

Cordialement ...

Answer 4

<% en utilisant (Html.BeginForm ("Register", "Utilisateur", FormMethod.Post, nouveau {id = "RegisterForm"}))

$("#RegisterForm").validate({ 

      rules: { 
       ignore: ":not(:visible)", 
       EmailAddress: { 
        required: true, 
        email: true 
       }, 
       ConfirmEmailAddress: { 
        required: true, 
        email: true, 
        equalTo: "#EmailAddress" 
       }, 
       Password: { 
        required: true 
       }, 
       ConfirmPassword: { 
        required: true, 
        equalTo: "#Password" 
       } 
      }, 
      messages: { 
       EmailAddress: { 
        required: " Email Address is required", 
        email: " Email Address is invalid" 
       }, 
       ConfirmEmailAddress: { 
        required: " Email Address is required", 
        email: " Email Address is invalid", 
        equalTo: "Enter Email Address same as above" 
       }, 
       Password: { 
        required: " Password is required" 
       }, 
       ConfirmPassword: { 
        required: " Password is required", 
        equalTo: " Enter Confirm Password same as above" 
       } 
      } 
     });