web-dev-qa-db-fra.com

Comment effacer les erreurs de validation côté client MVC lorsqu'un clic sur le bouton d'annulation est effectué lorsqu'un utilisateur a invalidé un formulaire

J'ai une vue partielle qui est rendue dans une vue principale. La vue partielle tire parti de System.ComponentModel.DataAnnotations et Html.EnableClientValidation(). 

Un lien est cliqué, et div contenant la vue partielle est affiché dans un JQuery.Dialog().

Je clique ensuite sur le bouton Enregistrer sans entrer de texte dans mon champ de saisie validé. La validation côté client est alors déclenchée comme prévu et le message "* requis" est affiché en regard du champ non valide.

Lorsque vous cliquez sur le bouton d'annulation, je souhaite rétablir la valeur par défaut de la validation MVC côté client et supprimer tous les messages, prêts à être ouverts lorsque l'utilisateur ouvrira à nouveau la boîte de dialogue. Y a-t-il un moyen recommandé de faire cela?

asp.netasp.net-mvcvalidationasp.net-mvc-2
28
Sci-fi

Cette réponse est pour MVC3. Voir les commentaires ci-dessous pour obtenir de l'aide pour mettre à jour MVC 4 et 5

Si vous voulez juste effacer les messages de validation afin qu'ils ne soient pas montrés à l'utilisateur, vous pouvez le faire avec javascript comme ceci:

function resetValidation() {
        //Removes validation from input-fields
        $('.input-validation-error').addClass('input-validation-valid');
        $('.input-validation-error').removeClass('input-validation-error');
        //Removes validation message after input-fields
        $('.field-validation-error').addClass('field-validation-valid');
        $('.field-validation-error').removeClass('field-validation-error');
        //Removes validation summary 
        $('.validation-summary-errors').addClass('validation-summary-valid');
        $('.validation-summary-errors').removeClass('validation-summary-errors');

    }

Si vous avez besoin de réinitialiser pour ne fonctionner que dans votre popup, vous pouvez le faire comme ceci:

function resetValidation() {
        //Removes validation from input-fields
        $('#POPUPID .input-validation-error').addClass('input-validation-valid');
        $('#POPUPID .input-validation-error').removeClass('input-validation-error');
        //Removes validation message after input-fields
        $('#POPUPID .field-validation-error').addClass('field-validation-valid');
        $('#POPUPID .field-validation-error').removeClass('field-validation-error');
        //Removes validation summary 
        $('#POPUPID .validation-summary-errors').addClass('validation-summary-valid');
        $('#POPUPID .validation-summary-errors').removeClass('validation-summary-errors');

    }

J'espère que c'est l'effet que vous recherchez.

42
Falle1234

Si vous utilisez une validation non intrusive fournie avec MVC, vous pouvez simplement faire:

$.fn.clearErrors = function () {
    $(this).each(function() {
        $(this).find(".field-validation-error").empty();
        $(this).trigger('reset.unobtrusiveValidation');
    });
};

---------------------------------------------------- ------------------------

Modification par une tierce partie : Cela fonctionnait généralement dans mon cas, mais je devais supprimer la ligne $(this).find(".field-validation-error").empty();. Cela semble affecter la ré-affichage des messages de validation lors de la resoumission.

J'ai utilisé ce qui suit:

$.fn.clearErrors = function () {
        $(this).each(function() {
            $(this).trigger('reset.unobtrusiveValidation');
        });
    };

et ensuite appelé comme ça:

$('#MyFormId input').clearErrors();
16
Martin
function resetValidation() {

    $('.field-validation-error').html("");

}
4
Ambala Chandrashekar

Je vous remercie. J'avais une question similaire pour un scénario légèrement différent. J'ai un écran où, lorsque vous cliquez sur l'un des boutons de soumission, il télécharge un fichier. Dans MVC, lorsque vous renvoyez un fichier à télécharger, les écrans ne sont pas basculés. Par conséquent, les messages d'erreur déjà présents dans le récapitulatif de validation y restent indéfiniment. Je ne veux certainement pas que les messages d'erreur y restent après la nouvelle soumission du formulaire. Mais je ne veux pas non plus effacer les validations au niveau du champ qui sont capturées côté client lorsque le bouton de soumission est cliqué. De plus, certains de mes points de vue ont plus d’une forme.

J'ai ajouté le code suivant (merci à vous) au bas de la page Site.Master pour qu'il s'applique à toutes mes vues.

    <!-- This script removes just the summary errors when a submit button is pressed 
    for any form whose id begins with 'form' -->
<script type="text/javascript">
    $('[id^=form]').submit(function resetValidation() {
        //Removes validation summary
        $('.validation-summary-errors').addClass('validation-summary-valid');
        $('.validation-summary-errors').removeClass('validation-summary-errors');
    });
</script>

Merci encore.

1
Robert Tanenbaum

Vous pouvez faire appel aux méthodes de la bibliothèque de validation pour le faire. Il y a deux objets d’intérêt: FormContext et FieldContext. Vous pouvez accéder à FormContext via la propriété __MVC_FormValidation du formulaire et à une FieldContext par propriété validée via la propriété FormContext 's fields.

Donc, pour effacer les erreurs de validation, vous pouvez faire quelque chose comme ceci avec un form:

var fieldContexts = form.__MVC_FormValidation.fields;
for(i = 0; i < fieldContexts.length; i++) {
    var fieldContext = fieldContexts[i];
    // Clears validation message
    fieldContext.clearErrors();
}
// Clears validation summary
form.__MVC_FormValidation.clearErrors();

Ensuite, vous pouvez rattacher ce morceau de code à l'événement dont vous avez besoin.

Sources pour cet aperçu (assez non documenté):

1
CGK

Ici, vous pouvez utiliser simplement supprimer le message d'erreur 

$('.field-validation-valid span').html('')

OR

  $('.field-validation-valid span').text('')

 enter image description here

0
Asif Raza

Vous pouvez simplement définir une nouvelle fonction dans jQuery:

$.fn.resetValidation = function () {
    $(this).each(function (i, e) {
        $(e).trigger('reset.unobtrusiveValidation');
        if ($(e).next().is('span')) {
            $(e).next().empty();
        }
    });
};

puis utilisez-le pour vos champs de saisie:

$('#formId input').resetValidation();
0
Baratali Qadamalizada

Afin de supprimer les artefacts de validation, y compris le message, l’arrière-plan coloré du champ de saisie et le contour coloré autour du champ de saisie, je devais utiliser le code suivant, où il s’agissait (dans mon cas) d’un dialogue modal Bootstrap une forme incrustée.

$(this).each(function () {
    $(this).find(".field-validation-error").empty();
    $(this).find(".input-validation-error").removeClass("input-validation-error");
    $(this).find(".state-error").removeClass("state-error");
    $(this).find(".state-success").removeClass("state-success");
    $(this).trigger('reset.unobtrusiveValidation');
});
0
robbpriestley