Question

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

请检查行 - （与此问题相关的行）

Prelude> :set -XMonomorphismRestriction
Prelude> let f x = if x then Left 55 else Right "foo"
Prelude> :t f
f :: Num a => Bool -> Either a [Char]
Prelude> let f = \x -> if x then Left 55 else Right "foo"
Prelude> :t f
f :: Bool -> Either Integer [Char]

}

剃刀看起来像这样：

(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);

截图

问题：我怎样才能动态添加字形符号，以便当字段有效时根据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添加到表单组（通过验证脚本）会显示相应的图标。

使用不显眼的验证以asp.net mvc形式动态添加bootstraph glyphicon

1 个答案: