из моего ответа на добавить класс в родительский div, если ошибка проверки происходит с помощью проверки jquery потому что я считаю, что это добавляет ценность существующим ответам на этот вопрос ...

Настройки Валидатора Доступа

первым делом нужно изменить settings объект в валидаторе формы. Вы можете сделать это любым из следующих способов:

1. перед загрузкой формы для всех форм путем вызова jQuery.validator.setDefaults()
2. при инициализации формы, передавая в параметры .validate([options])
3. после инициализации путем размещения объекта валидатора в форме с $("form").data("validator").settings

так как вы используете MVC, вариант #2 не может быть и речи, так как ненавязчивой проверки автоматически инициализирует форму. Итак, давайте использовать Вариант 3 вперед - цель здесь состоит в том, чтобы просто иметь возможность настройте параметры в форме.

Переопределить Поведение По Умолчанию

методы по умолчанию, которые мы хотим изменить, являются highlight и unhighlight что будет выделить недопустимые поля или отменить изменения, внесенные опцией выделения, соответственно. Вот их поведение по умолчанию согласно исходному коду:

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

Итак, у вас есть несколько вариантов здесь что ж.

1. полностью замените эти функции и напишите их самостоятельно
2. оберните эти функции и вызовите их как обычно, но добавьте свой собственный код до или после.

Вариант 1-Заменить Оптом

этот маршрут довольно легко. Просто напиши там все, что хочешь. Может быть, семя из исходного кода, может быть, сделать свое дело.

var valSettings = $("form").data("validator").settings
valSettings.highlight = function(element, errorClass, validClass) { ... }
valSettings.unhighlight = function(element, errorClass, validClass) { ... }

Вариант 2-Функции Wrap

это меньше навязчивая так, вероятно, предпочтительнее в большинстве случаев.

так как в конечном итоге вы будете заменять значение valSettings.highlight, вам понадобится доступ к чистой нетронутой версии исходной функции. Вы можете сохранить свой собственный или захватить один из глобальных значений по умолчанию

// original highlight function
var highlightOriginal = $("form").data("validator").settings.highlight;
var highlightDefaults = $.validator.defaults.highlight

С точки зрения упаковки функций JavaScript есть несколько примеров здесь, здесь и здесь). Вот разбираемый пример из одного из тех, что будут помогите связать this контекст между вызовами функций, сохраняет arity передаваемых аргументов и сохраняет возвращаемое значение:

function wrap(functionToWrap, beforeFunction) {
    return function () {
        var args = Array.prototype.slice.call(arguments),
        beforeFunction.apply(this, args);
        return functionToWrap.apply(this, args);
    };
};

тогда вам также придется быстро определить любое дополнительное поведение, которое вы хотите запустить при каждом вызове. В этом случае давайте найдем ближайшего родителя div к элементу и обновлению это такие классы:

function highlightDecorator(element, errorClass, validClass) {
    $(element).closest("div").addClass(errorClass).removeClass(validClass);
}

Оборачивая Все Это ^{(смотрите, что я сделал там)}

$(function () {
  var valSettings = $("form").data("validator").settings
  valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
  valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
});

function wrap(functionToWrap, beforeFunction) {
  return function () {
    var args = Array.prototype.slice.call(arguments);
    beforeFunction.apply(this, args);
    return functionToWrap.apply(this, args);
  };
};

function highlightDecorator(element, errorClass, validClass) {
  $(element).closest("div").addClass(errorClass).removeClass(validClass);
}
function unhighlightDecorator(element, errorClass, validClass) {
  $(element).closest("div").addClass(validClass).removeClass(errorClass);
}

поэтому, когда мы объединяем все вышеперечисленные функции, это должно выглядеть примерно так:

рабочая демо в стеке фрагментов и jsFiddle

$(function () {
  var valSettings = $("form").data("validator").settings
	valSettings.highlight = wrap($.validator.defaults.highlight, highlightDecorator)
  valSettings.unhighlight = wrap($.validator.defaults.unhighlight, unhighlightDecorator)
});

function wrap(functionToWrap, beforeFunction) {
  return function () {
    var args = Array.prototype.slice.call(arguments);
    beforeFunction.apply(this, args);
    return functionToWrap.apply(this, args);
  };
};

function highlightDecorator(element, errorClass, validClass) {
  $(element).closest("div").addClass(errorClass).removeClass(validClass);
}
function unhighlightDecorator(element, errorClass, validClass) {
  $(element).closest("div").addClass(validClass).removeClass(errorClass);
}

input.input-validation-error  {
  border: solid 1px red;
}
.input-validation-error label {
  color: red;
}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
    
<form action="/Person" method="post">
  
  <div class="required">
    <label for="Name">Name <em>*</em></label>           
    <input id="Name" name="Name" type="text" value="" 
           data-val="true" data-val-required="The Name field is required."/>
    <span class="field-validation-valid" 
          data-valmsg-for="Name" data-valmsg-replace="true"></span>
  </div>
  
  <input type="submit" value="Save" />
  
</form>

Я могу ошибаться, но похоже, что вам нужно .родители('див.контрольная группа") Нет .родитель(), который добавляет .ошибка в неправильном div, не меняя цвета формы загрузок на красный.

это потому, что вход, который jQuery Validate пытается выделить, находится на два ниже .control-группа, для которой требуется BootStrap .ошибка, чтобы получить свой эффект.

$("#form").validate({
    highlight: function(element, errorClass, validClass){
    $(element).parents("div.control-group").addClass(errorClass).removeClass(validClass);
},

надеюсь, что это помогает