Проверка jQuery помещает элемент span для ошибки, даже если нет ошибки, чтобы показать - PullRequest
Новая
       27

Проверка jQuery помещает элемент span для ошибки, даже если нет ошибки, чтобы показать

0 голосов
/ 14 сентября 2018

У меня есть проект, который написан с c# в верхней части ASP.NET MVC5. Я использую css-bootstrap 3 top design моего сайта. Я также использую jQuery-Validation вместе с jquery-validation-unobtrusive для обработки проверки на стороне клиента.

По какой-то причине jQuery-Validation вставляет элемент span под вход, даже если ошибки нет. Это приводит к появлению дополнительного пространства под входом, который не нужен.

Как я могу помешать пакету jQuery-Validation вставить контейнер с ошибкой, если ошибки нет?

Вот порядок, в котором я включаю эти пакеты в свой html-макет

  1. jquery.validate.min.js это пакет проверки jquery
  2. jquery.validate.setup.js это моя собственная конфигурация для пакета проверки jquery
  3. jquery.validate.unobtrusive.js это пакет jquery.validate.unobtrusive
  4. query.validate.unobtrusive.setup.js это моя собственная конфигурация для пакета jquery.validate.unobtrusive

Вот содержимое моего jquery.validate.setup.js файла 

$.validator.setDefaults({
    ignore: ":hidden:not('.force-validaion'), .ignore",
    highlight: function (element, _errorClass, _validClass) {

        $(element).closest('.form-group,.form-group-custom.input-group,.input-group-custom').addClass('has-error');
    },
    unhighlight: function (element, _errorClass, _validClass) {

        $(element).closest('.help-block-error-placeholder').removeClass('has-error');
    }
});

Вот содержимое моего query.validate.unobtrusive.setup.js файла 

var settings = {
    errorElement: "span",
    errorClass: "help-block help-block-error-placeholder",
    debug: true,
    errorPlacement: function (error, element) {
        var elm = $(element);
        var parent = elm.closest('.input-group,.input-group-custom');

        if (parent.length) {
            error.insertAfter(parent);
        }
        else if (elm.prop('type') === 'checkbox' || elm.prop('type') === 'radio') {
            error.appendTo(elm.closest(':not(input, label, .checkbox, .radio)').first());
        }
        else {
            error.insertAfter(elm);
        }
    },

    submitHandler: function (form) {
        showLoading();
        form.submit();
    }
};

$.validator.unobtrusive.options = settings;

По какой-то причине после того, как вход теряет фокус, добавляется следующий диапазон, даже если нет ошибки 

<span id="INPUT_NAME-error" class="help-block help-block-error-placeholder"></span>

Как я могу предотвратить вставку этого span элемента, если нет ошибки?

1 Ответ

0 голосов
/ 14 сентября 2018

Плагин jQuery Validate собирается добавить это span, чтобы оно содержало любые сообщения об ошибках валидации. Затем он будет переключать эти элементы при переключении сообщений об ошибках.

Вы устанавливаете его на span здесь ... 

var settings = {
    errorElement: "span" 
    ....

По умолчанию (если вы пропустите опцию errorElement), плагин будет создавать label элементов.

Я не уверен, как невидимый span может занимать место в вашем макете, но он, безусловно, имеет какое-то отношение к вашему CSS, чего мы не видим.

Я предлагаю попробовать удалить errorElement, чтобы вернуться к элементу label по умолчанию. Когда сообщение об ошибке отсутствует, этот скрытый элемент должен занимать нулевое место в макете. В противном случае, если вы по какой-то причине должны использовать span, вам придется проверять работающую DOM для устранения неполадок в CSS.

...