Le message FluentValidation s'affiche, mais le formulaire est quand même soumis.

Question

Utilisation de MVC4 avec FluentValidation. J'ai un champ avec deux règles dessus. La règle NotEmpty fonctionne comme prévu. La règle Matches semble se déclencher, mais le formulaire est malgré tout soumis, même si le message de validation apparaît comme s'il échouait à la validation.

J'ai le modèle de vue suivant et validateur:

public class ImpactedEntityViewModelValidator : AbstractValidator<ImpactedEntityViewModel> 
{ 
    public ImpactedEntityViewModelValidator() 
    { 
     RuleFor(x => x.ImpactedEntityDescription) 
      .Matches("[a-zA-Z0-9/ ]{1,}").WithMessage("Description can only contain letters, numbers, '/', and spaces.") 
      .NotEmpty().WithMessage("Description is required."); 
    } 
} 

[Validator(typeof(ImpactedEntityViewModelValidator))] 
public class ImpactedEntityViewModel 
{ 
    public int? ImpactedEntityLUID { get; set; } 

    [Display(Name = "Impacted Entity Description")] 
    public string ImpactedEntityDescription { get; set; } 

    public bool? Deleted { get; set; } 
} 

Vue:

@model ChangeControlForm.Models.ImpactedEntityViewModel 

@using (Html.BeginForm()) 
{ 
    @Html.AntiForgeryToken() 

    @Html.EditorFor(model => model) 

    <p> 
     <input type="submit" value="Create" class="btn btn-default" /> 
    </p> 
} 

Ajouté à Global Application_Start:

FluentValidation.Mvc.FluentValidationModelValidatorProvider.Configure(); 

Je ne sais pas comment cela est possible. Il ne sera pas soumis si le champ est vide, comme prévu. Si je saisis un "%" par exemple, le message de la règle Correspondances apparaîtra mais il sera immédiatement soumis après et écrit l'enregistrement. Y a-t-il quelque chose qui me manque?

Merci.

par la réponse de Michael Crook:

Ceci a résolu le problème:

$("form").submit(function() { 
    var form = $(this); 
    if (form.valid()) { 
     // do valid stuff 
    } 
    else { 
     return false; 
    } 
}); 

réponse Per LeftyX:

Vérifié mes paquets NuGet et jQuery eu une mise à jour disponible. La mise à jour vers 2.1.4 a corrigé le problème et je n'ai pas besoin de la vérification supplémentaire sur soumettre.

Merci à tous.

Answer 1

Vous ne devez pas vraiment faire la vérification de validation vous:

$("form").submit(function() { 
    var form = $(this); 
    if (form.valid()) { 
     // do valid stuff 
    } 
    else { 
     return false; 
    } 
}); 

Je veux dire, vous pouvez, mais probablement vous avez probablement déjà tout ce que vous avez besoin en place.

Si vous cochez dans votre dossier Scripts, vous devriez avoir:

jquery.validate.js 
jquery.validate.unobtrusive.js 

et

jquery.unobtrusive-ajax.js (this is only needed if you're POSTing ajax) 

et vous BundleConfig faisceaux déjà les scripts nécessaires à la validation côté client:

bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
    "~/Scripts/jquery.unobtrusive*", 
    "~/Scripts/jquery.validate*")); 

le modèle par défaut n'ajoute pas la référence à l'automate mais vous pouvez quement ajouter ajoutant simplement:

@Scripts.Render("~/bundles/jqueryval") 

à votre _Layout.cshtml ou partout où vous avez besoin de la validation côté client.

si vous vérifiez le code HTML pour votre formulaire, vous verrez que votre entrée:

<input name="ImpactedEntityDescription" class="text-box single-line" id="ImpactedEntityDescription" type="text" value="" data-val="true" data-val-required="Description is required." data-val-regex-pattern="[a-zA-Z0-9/ ]{1,}" data-val-regex="Description can only contain letters, numbers, '/', and spaces."> 

ont tous les attributs discrets mis en place:

data-val="true" 
data-val-required="Description is required." 
data-val-regex-pattern="[a-zA-Z0-9/ ]{1,}" 
data-val-regex="Description can only contain letters, numbers, '/', and spaces." 

jquery.validate.js vérifie la forme avant sumitting pour vous (ligne 404):

// http://jqueryvalidation.org/Validator.form/ 
form: function() { 
    this.checkForm(); 
    $.extend(this.submitted, this.errorMap); 
    this.invalid = $.extend({}, this.errorMap); 
    if (!this.valid()) { 
     $(this.currentForm).triggerHandler("invalid-form", [ this ]); 
    } 
    this.showErrors(); 
    return this.valid(); 
}, 

Vérifiez votre nuget les paquets sont mis à jour.

Answer 2

Vous constaterez probablement que FluentValidation (que j'ai seulement utilisé pour la validation côté serveur, pas côté client) n'a pas la possibilité de désactiver la publication. Vous pouvez essayer d'utiliser jquery pour rechercher des classes d'erreurs de validation, puis désactiver le bouton vous-même.

Answer 3

Outre les causes possibles déjà mentionnées ci-dessus, cette ligne dans votre vue peut aussi causer un soumettre du formulaire dès qu'un utilisateur frappe votre bouton d'envoi, même si la forme est encore invalide:

HtmlHelper.ClientValidationEnabled = false;