Fluent Validation，MVC：在单击按钮时触发客户端规则集验证

Question

上下文

在一个视图中，我为我的视图模型创建了一个表单。我使用 Twitter Bootstrap 向导插件将表单分成多个部分。用户可以通过单击 "Next" 按钮访问下一部分。每个部分都有一个为该部分的模型属性定义的 Fluent Validation RuleSet。我在每个 RuleSet 中定义的规则与 Fluent Validaiton 的客户端验证兼容。

问题

点击下一步按钮后，最好的方法是什么：

要使用 Fluent Validation 在 客户端 上获取仅当前部分的规则集的验证状态？
要让 Fluent Validation 仅显示当前部分规则集的客户端验证？

我尝试过的

我已阅读 Fluent Validation start guide and this question。虽然他们演示了如何在服务器端实现我正在寻找的东西，但他们似乎无法解决我的客户端问题。我加粗 "seem" 因为我对 Fluent Validation 和 MVC 相当陌生，所以，我可能误解了链接的内容。

Answer 1

您可以使用 Fluent Validation 使用的 jQuery 验证库中的命令。

在表单的一个元素中，定义一个有助于识别验证组的属性。例如

@Html.EditorFor(model => model.GroupA_TextA, new { htmlAttributes = new { @class = "form-control", data_validation_group = "GroupA" }})

使用 jQuery 验证库中的 .settings.ignore 语法来控制要验证的组。

我制作了一个 class，它公开了验证 Fluent Validation 验证表单中的组以及整个表单的功能。我在下面包含了 TypeScript 和转译 JavaScript。

TypeScript

/**
 * For validating a form when Fluent Validation is used for model valdiation.
 */
interface IFluentValidationFormValidator {
    /**
     * The form to validate.
     */
    form: JQuery<HTMLElement>;

    /**
     * The name of the validation group to validate.
     */
    group: string;

    /**
     * Validate the entire form.
     */
    validate(): boolean;

    /**
     * Validate a validation group in the form.
     * @param group The name of the validation group to validate.
     */
    validateGroup(): boolean;
}

/**
 *
 */
class StandardFluentValidationFormValidator implements IFluentValidationFormValidator {
    /**
     * @inheritdoc 
     */
    form: JQuery<HTMLElement>;

    /**
     * @inheritdoc
     */
    group: string;

    /**
     * @inheritdoc
     */
    validate(): boolean {
        const formValidator = this.form.validate();
        formValidator.form();
        return formValidator.valid();
    }

    /**
     * @inheritdoc
     */
    validateGroup(): boolean {
        // The form validator.
        const formValidator = this.form.validate();

        // Perform standard validation on form if the validation group is undefined.
        if (this.group === undefined) {
            formValidator.form();
            return formValidator.valid();
        }

        // Current group validation settings.
        const initialValidateIgnoreSetting = formValidator.settings.ignore;

        // Ignore all elements but the group.
        formValidator.settings.ignore += `,:not([data-validation-group=${this.group}])`;

        // Valdiate the form.
        formValidator.form();

        // Reset group validation settings.
        formValidator.settings.ignore = initialValidateIgnoreSetting;

        // Return the validation state.
        return formValidator.valid();
    }
}

JavaScript

"use strict";
var StandardFluentValidationFormValidator = (function () {
    function StandardFluentValidationFormValidator() {
    }
    StandardFluentValidationFormValidator.prototype.validate = function () {
        var formValidator = this.form.validate();
        formValidator.form();
        return formValidator.valid();
    };
    StandardFluentValidationFormValidator.prototype.validateGroup = function () {
        var formValidator = this.form.validate();
        if (this.group === undefined) {
            formValidator.form();
            return formValidator.valid();
        }
        var initialValidateIgnoreSetting = formValidator.settings.ignore;
        formValidator.settings.ignore += ",:not([data-validation-group=" + this.group + "])";
        formValidator.form();
        formValidator.settings.ignore = initialValidateIgnoreSetting;
        return formValidator.valid();
    };
    return StandardFluentValidationFormValidator;
}());

Fluent Validation，MVC：在单击按钮时触发客户端规则集验证

Fluent Validation, MVC: Triggering Client-Side RuleSet Validation on Button Click

asp.net-mvc

fluentvalidation

client-side-validation

上下文

问题

我尝试过的