Question

我正在尝试为以前由其他人写的东西添加一些新功能，我需要在验证网格元素之后突出显示一个单选按钮，该网格元素与无线电按钮位于同一行。

$.validator.addMethod(
     "CountyCheck",
     function (value, element) {             
             if ($("input[type='radio']:checked").closest('tr').find('select') && $("input[type='radio']:checked").closest('tr').find('select').length > 0) {
                 if ($("input[type='radio']:checked").closest('tr').find('select').val() != '')
                     return ($.trim($('#tobevalidated').val()).toLowerCase() === $.trim($("input[type='radio']:checked").closest('tr').find('select').val()).toLowerCase());
                 else
                     return true;
             }
             else {
                 return ($.trim($('#tobevalidated').val()).toLowerCase() === $.trim($("input[type='radio']:checked").closest('tr').find('.labelclass').html()).toLowerCase());
             }          
     }, "");

上述验证方法检查网格中的单选按钮并搜索下拉列表（如果存在）或标签，并检查所选选项/标签值是否等于要验证的特定值。 #tobevalidated）。网格的cshtml看起来像这样：

var grid = addresses != null ? new WebGrid(addresses, canSort: false, canPage: false) : new WebGrid(new List<Address>(), canSort: false, canPage: false);
var gridColumns = new List<WebGridColumn>();

gridColumns.Add(grid.Column("", format: item => Html.RadioButton("IsStandardized", true, ((bool?)item.IsStandardized).GetValueOrDefault(), new { data_SerializedAddressData = (string)item.JSonSerializedAddressData }), style: "webgridcol1Width"));
gridColumns.Add(grid.Column("Address1", "Address1", style: "addrLine"));
gridColumns.Add(grid.Column("Address2", "Address2", style: "addrLine"));
gridColumns.Add(grid.Column("City", "City", style: "webgridcol2Width"));
gridColumns.Add(grid.Column("State", "State", style: "webgridcol2Width"));
gridColumns.Add(grid.Column(header: "Postal Code", style: "webgridcol2Width", format: item => CommonUtility.GetZipCode((Address)item.Value, true)));
gridColumns.Add(grid.Column("Country", "Country", style: "webgridcol2Width"));
//TODO: Need to see how to add AddressType to Standardized Addresses or just check with updated Address' AddressType
if (updatedAddresses.Any(addr => !(addr.AddressType == AddressCodeEnum.BillingAddress || addr.AddressType == AddressCodeEnum.MailingAddress)))
{
    gridColumns.Add(grid.Column(columnName: "County", header: "County", style: "countyname", format: addr =>
       {
           if (addr.StandardizedCounties != null && addr.StandardizedCounties.Count > 1)
           {
               bool isRadioSelected = ((bool?)addr.IsStandardized).GetValueOrDefault();
               List<SelectListItem> countiesList = Html.ConvertToSelectList<string>((List<string>)addr.StandardizedCounties, (a) => a, (a) => a, true, isRadioSelected ? Model.StandardizedAddress.County : "");
               MvcHtmlString returnValue = Html.DropDownList((string)string.Format("CountyDDL[{0}]", addr.WebGrid.Rows.IndexOf(addr)), countiesList);
               return returnValue;
           }
           else
           {
               String county = (addr.StandardizedCounties != null && addr.StandardizedCounties.Count == 1) ? Model.County : addr.County;
               return county;
           }
       }));
}

我想在验证失败时突出显示选中的单选按钮，但问题是jquery-validate.js

highlight: function(element, errorClass, validClass) {
        if (element.type === 'radio') {
            this.findByName(element.name).addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
    }

使用类似这样的东西来添加一个css类，因为这里的element.name对于所有的单选按钮是相同的，但是我想突出显示被选中的按钮。

我在validate.js的高亮显示方法中使用了类似的东西

highlight: function(element, errorClass, validClass) {
        if (element.type === 'radio') {
            $(element).is(":checked").addClass(errorClass).removeClass(validClass);
        } else {
            $(element).addClass(errorClass).removeClass(validClass);
        }
    },

但这似乎不起作用，而且只要验证被触发，它就会重新加载页面。

我真的很高兴，如果有人能指出我正确的方向，那将会有很大的帮助。谢谢！

如何使用jquery验证突出显示属性

0 个答案: