将jQuery验证添加到ASP.NET MVC页面中发布的“选定"下拉列表中 [英] Adding jquery validation to Chosen drop down list on post in ASP.NET MVC page

问题描述

我正在使用Visual Studio 2013预览版中的默认网站模板，该模板默认情况下集成了Bootstrap(已替换为v3)

在表单中，在POST上验证的Jquery会正确突出显示错误字段，但我使用选择的"插件设置样式的下拉框除外.

我在相关下拉列表中的代码是:

@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设置要显示的元素:无，因此显然不会显示边框.

理想情况下，如果我可以将input-validation-error类添加到select所在的div中，则可以解决我的问题，但是我不知道该怎么做，因此，非常欢迎您提供任何帮助！ /p>

注意-实际上，我不需要客户端验证，仅在POST上使用验证.

解决方案

@Bartek Marnane，您需要覆盖jQuery Validate在应用失败的验证CSS类时默认使用的Highlight和Unhighlight回调.您要做的是检查突出显示和不突出显示的元素，以查看它是否是一个选定的下拉列表，以从显示列表的元素中应用/删除css类.

我尚未验证所选的高亮和反高亮功能，因为我之前从未使用过该插件.如果有什么需要调整的，我最终会调整我的css类，以检查该元素是否为选定的下拉列表.意识到将触发验证的元素将是不可见的元素.如果未触发验证，则jQuery验证中的设置为忽略某些元素.

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

I'm using a default site template from Visual Studio 2013 preview which integrates Bootstrap by default (which I replaced with v3)

In a form, the Jquery validate on POST correctly highlights error fields, except for drop down boxes that I've styled with the Chosen plugin.

My code for the drop down list in question is:

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

This renders as follows:

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

Notice that the input-validation-error class is being added to an element that Chosen sets to display:none so obviously the border doesn't get shown.

Ideally if I can add the input-validation-error class to the div that's within the select, then this will fix my problem, but I don't know how to do that, so any assistance would be greatly welcome!

Note - I'm actually not after client side validation, I'm only using validation on POST.

解决方案

@Bartek Marnane, You're going to need to override the highlight and unhighlight callbacks that jQuery Validate uses by default when applying it's failed validation css class. What you'll want to do is inspect the element on highlight and unhighlight to see if it's a chosen drop down list to apply/remove the css class from the element that is presenting the list.

I haven't verified the highlight and unhighlight function for chosen because I've not worked with that plugin before. If anything you'll end up tweaking my css class check on the element to see if it is a chosen drop down or not. Realize that the element that will fire validation will be the one that is not visible. If it's not firing validation then there is a setting in jQuery validate to ignore certain elements.

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

这篇关于将jQuery验证添加到ASP.NET MVC页面中发布的“选定"下拉列表中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！