0

我正在使用 Visual Studio 2013 预览版中的默认站点模板，该模板默认集成了 Bootstrap（我已将其替换为 v3）

在一个表单中，POST 上的 Jquery validate 正确地突出显示了错误字段，除了我使用 Chosen 插件设置样式的下拉框。

在此处输入图像描述

我有问题的下拉列表的代码是：

@Html.DropDownListFor(
    x => x.Job.State,
    Model.States,
    "Select a State", new { @class = "form-control chosen-select"})
    @Html.ValidationMessageFor(model => model.Job.State)

这呈现如下：

<select class="input-validation-error form-control chosen-select" id="Job_State" name="Job.State" style="width: 50%; display: none;">
    <option value="">Select a State</option>
    <option value="ACT">ACT</option>
    <option value="NSW">NSW</option>
    <option value="QLD">QLD</option>
    <option value="TAS">TAS</option>
    <option value="NT">NT</option>
    <option value="VIC">VIC</option>
    <option value="WA">WA</option>
</select>
<div class="chosen-container chosen-container-single" style="width: 135px;" title="" id="Job_State_chosen"><a class="chosen-single" tabindex="-1"><span>Select a State</span><div><b></b></div>
</a>
    <div class="chosen-drop">
        <div class="chosen-search">
            <input type="text" autocomplete="off"></div>
        <ul class="chosen-results">
            <li class="active-result result-selected" style="" data-option-array-index="0">Select a State</li>
            <li class="active-result" style="" data-option-array-index="1">ACT</li>
            <li class="active-result" style="" data-option-array-index="2">NSW</li>
            <li class="active-result" style="" data-option-array-index="3">QLD</li>
            <li class="active-result" style="" data-option-array-index="4">TAS</li>
            <li class="active-result" style="" data-option-array-index="5">NT</li>
            <li class="active-result" style="" data-option-array-index="6">VIC</li>
            <li class="active-result" style="" data-option-array-index="7">WA</li>
        </ul>
    </div>
</div>
<span class="field-validation-error">State is required.</span>

注意 input-validation-error 类被添加到 Chosen 设置为 display:none 的元素中，因此很明显没有显示边框。

理想情况下，如果我可以将 input-validation-error 类添加到选择中的 div 中，那么这将解决我的问题，但我不知道该怎么做，所以非常欢迎任何帮助！

注意 - 我实际上不是在客户端验证之后，我只是在 POST 上使用验证。

4

2 回答 2

1

@Bartek Marnane，您将需要覆盖jQuery Validate 在应用失败的验证 css 类时默认使用的突出显示和取消突出显示回调。您要做的是检查突出显示和取消突出显示的元素，看看它是否是一个选择的下拉列表，用于从呈现列表的元素中应用/删除 css 类。

我还没有验证选择的突出显示和取消突出显示功能，因为我以前没有使用过那个插件。如果有的话，你最终会调整我的 css 类检查元素，看看它是否是一个选择的下拉菜单。意识到将触发验证的元素将是不可见的元素。如果它没有触发验证，那么 jQuery validate 中有一个设置来忽略某些元素。

// This script block should be placed after jQuery, jQuery Validate and jQuery Validate
// Unobtrusive plugins have been loaded.
$(function () {
    // retrieves the current jQuery validator for the form
    var $validator = $("form").validate();
    // We're going to override the default highlight method from jQuery when applying
    // our css class for an error
    $validator.settings.highlight = function (element, errorClass, validClass) {
        var $element = $(element);
        if ($element.hasClass("chosen-select")) {
            // It's a chosen element so move to the next element in the DOM 
            // which should be your container for chosen.  Add the error class to 
            // that instead of the hidden select
            $element.next().addClass(errorClass).removeClass(validClass);
        }
        else if (element.type === "radio") {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $element.addClass(errorClass).removeClass(validClass);
        }
    };
    // We're going to override the default unhighlight method from jQuery when removing
    // our css class for an error
    $validator.settings.unhighlight = function (element, errorClass, validClass) {
        var $element = $(element);
        if ($element.hasClass("chosen-select")) {
            // It's a chosen element so move to the next element in the DOM 
            // which should be your container for chosen.  Add the error class to 
            // that instead of the hidden select
            $element.next().removeClass(errorClass).addClass(validClass);
        }
        else if (element.type === "radio") {
            this.findByName(element.name).removeClass(errorClass).addClass(validClass);
        } else {
            $element.removeClass(errorClass).addClass(validClass);
        }
    };
});
于 2013-09-04T13:39:00.077 回答
0

我从未使用过选择，但我认为您可以通过检查 ModelState 在视图中设置输入验证错误类：

@if(!ModelState.IsValid){
    Html.DropDownListFor(
        x => x.Job.State,
        Model.States,
        "Select a State", new { @class = "input-validation-error form-control chosen-select"})
        Html.ValidationMessageFor(model => model.Job.State)
}
于 2013-09-04T12:47:23.727 回答