出现 FluentValidation 消息，但表单仍会提交

Question

将 MVC4 与 FluentValidation 结合使用。我有一个字段，上面有两条规则。 NotEmpty 规则按预期工作。匹配规则似乎触发了，但表单仍然提交，即使弹出验证消息，好像验证失败一样。

我有以下视图模型和验证器：

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; }
}

查看：

@model ChangeControlForm.Models.ImpactedEntityViewModel

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

    @Html.EditorFor(model => model)

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

已添加到全局 Application_Start:

FluentValidation.Mvc.FluentValidationModelValidatorProvider.Configure();

我不确定这怎么可能。如果字段留空，它将不会提交，正如预期的那样。例如，如果我输入“%”，匹配规则的消息将弹出，但随后它会立即提交并写入记录。有没有我遗漏的东西可能导致这种情况？

谢谢。

根据 Michael Crook 的回答：

这解决了问题：

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

根据 LeftyX 的回答：

检查了我的 Nuget 包，jQuery 有可用的更新。将它更新到 2.1.4 解决了这个问题，我不需要在提交时进行额外检查。

谢谢大家

Answer 1

您可能会发现 FluentValidation（我只用于服务器端验证，而不是客户端）没有禁用发布的功能。您可以尝试使用 jquery 在表单中搜索验证错误类然后自己禁用按钮。

Answer 2

您实际上不必自己进行验证检查：

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

我的意思是，您可以，但您可能已经准备好所需的一切。

如果你检查你的脚本文件夹，你应该有：

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

和

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

并且您 BundleConfig 已经捆绑了客户端验证所需的脚本：

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

默认模板不会自动添加对包的引用，但您只需添加即可添加：

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

到您的 _Layout.cshtml 或您需要客户端验证的任何地方。

如果您检查表单的 html，您将看到您的输入：

<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.">

设置所有不显眼的属性：

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 在为您提交之前检查表格（第 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();
},

检查您的 nuget 包是否已更新。

Answer 3

除了上面已经提到的可能原因之外，您认为的这一行也可能会在用户点击您的提交按钮时立即提交表单，即使表单仍然无效：

HtmlHelper.ClientValidationEnabled = false;

出现 FluentValidation 消息，但表单仍会提交

FluentValidation message appears, but form submits anyway

asp.net-mvc

fluentvalidation

asp.net-mvc-4