Из моего ответа на добавьте класс в родительский div, если ошибка проверки происходит с использованием проверки jquery , потому что я считаю, что это добавляет ценность к существующим ответам на этот вопрос ...
Настройки валидатора доступа
Первым делом нужно изменить объект settings в валидаторе вашей формы. Вы можете сделать это любым из следующих способов:
- Перед загрузкой формы для всех форм вызовите
jQuery.validator.setDefaults()
- При инициализации формы путем ввода параметров на
.validate([options])
- После инициализации путем обнаружения объекта валидатора в форме с помощью
$("form").data("validator").settings
Поскольку вы используете MVC, вариант № 2 исключен, поскольку unobtrusive-validation автоматически инициализирует форму. Итак, давайте воспользуемся опцией 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 - Заменить оптом
Этот маршрут довольно прост. Просто напишите там, что вы хотите. Может быть, семена из исходного кода, возможно, делать свое дело.
var valSettings = $("form").data("validator").settings
valSettings.highlight = function(element, errorClass, validClass) { ... }
valSettings.unhighlight = function(element, errorClass, validClass) { ... }
Вариант 2 - Функции обтекания
Это менее навязчиво, поэтому, вероятно, предпочтительнее в большинстве случаев.
Поскольку в конечном итоге вы замените значение valSettings.highlight, вам потребуется доступ к чистой исходной версии исходной функции. Вы можете сохранить свой собственный или получить один из глобальных значений по умолчанию
// original highlight function
var highlightOriginal = $("form").data("validator").settings.highlight;
var highlightDefaults = $.validator.defaults.highlight
С точки зрения упаковки функций JavaScript, есть пара примеров здесь , здесь и здесь ). Вот проанализированный пример одного из них, который поможет связать контекст this между вызовами функций, сохранить арность передаваемых аргументов и сохранить возвращаемое значение:
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>