web-dev-qa-db-fra.com

Appelez manuellement la validation côté client MVC 3 pour les publications ajax

Je crée une application Web MVC 3. Je souhaite utiliser les annotations de données sur ma classe d'entités, puis la validation discrète côté client avant de publier une publication sur le serveur. Cela fonctionne très bien pour un poste régulier. Je reçois la validation et le résumé de la validation si l'un des champs n'est pas valide. Cependant, je veux renvoyer les informations via ajax et json. Comment puis-je «manuellement» valider le formulaire côté client d'abord, puis envoyer ma publication ajax sur le serveur. 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écapitulatif de validation.

    $("#CustomerEditSave").click(function () {
        $(form).validate();
        //Ajax call here
    });
javascriptjqueryasp.net-mvcvalidationasp.net-mvc-3
58
Thomas

Essayer:

//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 ou https://github.com/webadvanced/takeCommand il s’occupera automatiquement de cela.

92
Paul

Cela fait plusieurs jours que j'utilise la validation côté client de MVC:

N'utilisez pas .Click, utilisez .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 à cela, pensez à annuler l'événement plutôt que de retourner false (ou 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;
});
24
Rob

Au moins dans mon cas (MVC 5), il était également nécessaire d’ajouter le code suivant, sinon .valid() renverrait toujours true:

$(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/

8
Chris Goodman

IMPORTANT!!:

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

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

Mais plus important encore, il n'y a vraiment aucune raison de restreindre votre code comme suggéré par le Dr Rob. Ce n'est pas ce qui a résolu le problème! Ce qui a résolu le problème, c'était d'encapsuler 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é, sinon la vraie solution au problème est obscurcie.

3
awrigley
        if(!$('#myform').data('unobtrusiveValidation').validate())
        {
           // add your extra custom logic
        } 
        else
        { 
             $('#myform').submit(); 
        }

Il déclenche la validation et renvoie un booléen, ce qui vous permet de vérifier avant de soumettre.

0
mrelva

$ (YourForm) .data ('unobtrusiveValidation'). Validate ()

0
Dipak Pandey

.Valid () fonctionne. c'est-à-dire qu'il vous indique si votre formulaire est valide. Cependant, seul, il est inutile d'afficher ET de masquer les messages correctement. voici ma méthode de validation manuelle

function validate()
        {
            //valid() not only tells us whether the form is valid but 
            //also ensures that errors are shown !!!
            if ($("form").valid())
            {
                //if the form is valid we may need to hide previously displayed messages
                $(".validation-summary-errors").css("display", "none");
                $(".input-validation-error").removeClass("input-validation-error");
                return true;
            }
            else
            {
                //the form is not valide and because we are doing this all manually we also have to
                //show the validation summary manually 
                $(".validation-summary-errors").css("display", "block");
                return false;
            }
        }
0
Squibly
I tried all of the above solutions but none worked on MVC5.

J'utilise jQuery v2.1.4 et jQuery.Validation v1.11.1. Je dois déclencher la validation lors du rendu de la page. Seulement ci-dessous on travaillait pour moi.

$(document).ready(function () {
   ...
   validateForm();
}

function validateForm() {`enter code here`
    var elem = document.getElementById('btnSave');
    elem.click();    
}

$('#btnSave').click(function (evt) {
    //evt.preventDefault();
    var form = $('form');
    if (form.valid()) {
        //Ajax call here
    }
    //$(".validation-summary-errors").css("display", "block");
});

function Validate() {
    // If no group name provided the whole page gets validated
    Page_ClientValidate();
}
0
user1810535