Appeler manuellement la validation côté client de MVC 3 pour les messages ajax

Question

Je suis en train de créer une application web MVC 3. Je veux utiliser les annotations de données sur ma classe d'entité et ensuite utiliser une validation discrète côté client avant de renvoyer un message au serveur. Cela fonctionne bien lors d'un envoi normal. J'obtiens la validation et le résumé de la validation si l'un des champs n'est pas valide. Cependant, je veux renvoyer les informations par ajax et json. Comment puis-je valider "manuellement" le formulaire du côté client, puis renvoyer l'information au serveur par ajax ? Vous trouverez ci-dessous une version résumée de mon code.

  public class Customer
    {
        [Required(ErrorMessage = "The customer's first name is required.")]
        public string FirstName { get; set; }

        [Required(ErrorMessage = "The customer's last name is required.")]
        public string LastName { get; set; }
    }

    <% using (Html.BeginForm()) { %>

    <%: Html.LabelFor(model => model.FirstName, "First Name")%>
    <%: Html.TextBoxFor(model => model.FirstName, new { @class = "TextBox", id = "Customer.FirstName" })%>
    <%: Html.ValidationMessageFor(model => model.FirstName, "*")%>

    <%: Html.LabelFor(model => model.LastName, "Last Name")%>
    <%: Html.TextBoxFor(model => model.LastName, new { @class = "TextBox", id = "Customer.LastName" })%>
    <%: Html.ValidationMessageFor(model => model.LastName, "*")%>

    <div id="CustomerEditSave" class="Button CustomerEditButtons" style="margin-right:40px;">
       <a href="#">Save</a>
    </div>

    <%: Html.ValidationSummary(true) %>

    <% } %>

J'ai essayé ce code mais il ne valide que le prénom et n'affiche pas le résumé de la validation.

    $("#CustomerEditSave").click(function () {
        $(form).validate();
        //Ajax call here
    });

Answer 1

Essayez :

//using the form as the jQuery selector (recommended)
$('form').submit(function(evt) {
    evt.preventDefault();
    var $form = $(this);
    if($form.valid()) {
        //Ajax call here
    }
});

//using the click event on the submit button
$('#buttonId').click(function(evt) {
    evt.preventDefault();
    var $form = $('form');
    if($form.valid()) {
        //Ajax call here
    }
});

Cela devrait fonctionner avec les appels jQuery ajax et MSAjax. Vous pouvez également essayer d'utiliser http://nuget.org/packages/TakeCommand.js o https://github.com/webadvanced/takeCommand il s'en chargera automatiquement pour vous.

Answer 2

Cela fait des jours que je m'amuse avec la validation côté client de MVC :

N'utilisez pas .click mais .submit :

$("#MyForm").on('submit',function () {

    if($("#MyForm").valid())
    {
        //Do ajax stuff
    }

    //Return false regardless of validation to stop form submitting
    //prior to ajax doing its thing
    return false;
});

Je vais ajouter une mise à jour à ce sujet, envisagez d'annuler l'événement plutôt que de renvoyer false (ou faites les deux) :

$("#MyForm").on('submit',function (e) {

    if($("#MyForm").valid())
    {
        //Do ajax stuff
    }

    e.preventDefault();

    //Return false regardless of validation to stop form submitting
    //prior to ajax doing its thing
    return false;
});

Answer 3

Au moins dans mon cas (MVC 5), il était également nécessaire d'ajouter le code suivant ou sinon .valid() retournerait toujours vrai :

$(function () {
$(document).ajaxComplete(function(event, request, settings){
    //re-parse the DOM after Ajax to enable client validation for any new form fields that have it enabled
    $.validator.unobtrusive.parse(document);
});

}) ;

Voir http://johnculviner.com/the-unobtrusive-libraries-client-validation-on-ajax-in-asp-net-mvc-3/

Answer 4

IMPORTANT!! :

La solution de Paul est la réponse correcte à la question, pas celle du Dr Rob.

Bien que vous puissiez simplement utiliser valid() au lieu de validate().form().

Mais surtout, il n'y a aucune raison de restreindre votre code comme le suggère le Dr Rob, c'est-à-dire de ne pas utiliser .click et de n'utiliser que .submit. Ce n'est pas ce qui a résolu le problème ! Ce qui a résolu le problème était d'envelopper l'appel $.ajax(...) dans l'instruction if. C'est-à-dire :

if($("#MyForm").valid())
{
    //call to $.ajax or equivalent goes in here.
}

Je pense que cela doit être clarifié, car sinon, la véritable réponse au problème est obscurcie.

Answer 5

$(VotreForm).data('unobtrusiveValidation').validate()