javascript - 通过不显眼的验证以 asp.net mvc 形式动态添加 bootstraph glyphicon

Question

我有以下 javascript，它根据 bootstrap 成功地放置了红色边框和绿色边框

请检查带有 - 的行(与此问题相关的行)

(function ($) {
    var defaultOptions = {
        errorClass: 'has-error',
        validClass: 'has-success',
        validIcon: 'glyphicon glyphicon-ok form-control-feedback',
        invalidIcon: 'glyphicon glyphicon-remove form-control-feedback',
        highlight: function (element, errorClass, validClass, validIcon, invalidIcon) {
            $(element).closest(".form-group")
            .addClass(errorClass)
            .removeClass(validClass);
            debugger;
            -$(element).next()
            -.addClass(invalidIcon)
            -.removeClass(validIcon);
        },
        unhighlight: function (element, errorClass, validClass, validIcon, invalidIcon) {
            $(element).closest(".form-group")
            .removeClass(errorClass)
            .addClass(validClass);
            debugger;
            -$(element).next()
            --.removeClass(invalidIcon)
            --.addClass(validIcon);
        }
    };

    $.validator.setDefaults(defaultOptions);

    $.validator.unobtrusive.options = {
        errorClass: defaultOptions.errorClass,
        validClass: defaultOptions.validClass,
    };
})(jQuery);

Razor View 是这样的:

<div class="form-group">

            @Html.LabelFor(model => model.FechaHasta, new { @class = "col-sm-2 control-label" })
            <div class="col-sm-10">
                @Html.EditorFor(model => model.FechaHasta, new { htmlAttributes = new { @class = "form-control" } })
                <span class="icon" aria-hidden="true"></span>
                <div class="help-block">
                    @Html.ValidationMessageFor(model => model.FechaHasta)
                </div>
            </div>

        </div>

截图

问题:我如何动态地添加字形，以便根据 boostrapframework，当一个字段有效时它显示绿色勾号，当它无效时它显示红色叉号。

http://screencast.com/t/Oat8DvZnsy

它应该像这样显示: http://screencast.com/t/irp2fafnGx

http://getbootstrap.com/css/#forms

Answer 1

将您的 HTML 更改为

<div class="form-group has-feedback">
    @Html.LabelFor(model => model.FechaHasta, new { @class = "col-sm-2 control-label" })
    <div class="col-sm-10">
        @Html.EditorFor(model => model.FechaHasta, new { htmlAttributes = new { @class = "form-control" } })
        <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
        <span class="glyphicon glyphicon-warning-sign form-control-feedback" aria-hidden="true"></span>
        <span class="glyphicon glyphicon-remove form-control-feedback" aria-hidden="true"></span>
        <div class="help-block">
            @Html.ValidationMessageFor(model => model.FechaHasta)
        </div>
    </div>
</div>

然后像这样添加CSS

.form-group.has-feedback > .form-control-feedback {
    display: none;
}
.form-group.has-success.has-feedback > .form-control-feedback.glyphicon-ok {
    display: block;
}
.form-group.has-warning.has-feedback > .form-control-feedback.glyphicon-warning-sign {
    display: block;
}
.form-group.has-error.has-feedback > .form-control-feedback.glyphicon-remove {
    display: block;
}

您可能需要稍微尝试一下 HTML - 我不确定 .icon 是否适用，因此我删除了它。另外，不确定 .help-block 的样式是什么。

无论如何，将类 .has-warning、.has-error 或 .has-success 添加到表单组(通过您的验证脚本)会显示相应的图标。