Добавьте класс в родительский div, если ошибка проверки происходит с помощью проверки jquery

Question

У меня есть следующая разметка для моих полей ввода:

<div class="required">
    <label for="Name">Name <em>*</em></label>           
    <div class="input large">
        @Html.TextBoxFor(m => m.Name)
        @Html.ValidationMessageFor(m => m.Name)
    </div>
</div>

Используя плагин проверки jquery, если произойдет ошибка, он добавит диапазон под входом и также применяет класс к самому входу, такчто ошибка может быть стилизована.То, что я также хочу сделать, это добавить класс родительского div с классом required.Так, например, если произойдет ошибка, это будет <div class="required error">, а затем будет зафиксировано <div class="required valid"> по отношению к классам, которые применяются к полю и удалению диапазона ошибок.

Как бы я это сделал?Я посмотрел на сайт документации, но не видел ничего общего с добавлением класса в родительский div.

Я думал о том, чтобы сделать что-то вроде:

if ($('input').hasClass('valid')) {
    $(this).parents('div.required').addClass('valid');

} else if ($('input').hasClass('input-validation-error')) {
    $(this).parents('div.required').addClass('error');
}

, ноКак я могу запустить это последовательность с проверкой?Например, когда происходит ошибка или поле становится действительным.

Answer 1

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

Первым делом нужно изменить объект 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 - Функции обтекания

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

Поскольку в конечном итоге вы замените значение 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>

Answer 2

Я вообще не играл с этим, но вы можете использовать jQuery Validate Hooks