2015-10-09 2 views
1

Я использую JQuery Validate, и я хочу, чтобы элемент ошибки в этом формате:JQuery Validate пользовательских ошибок элемент с атрибутом сообщения данных

<div class="error-holder" data-error-message="Please correct this field"></div>

Я уже пробовал использовать errorPlacement и errorElement вариант:

errorPlacement: function (error, element) { 
     error = error.attr("class", "error-holder").attr("data-error-message", error.text()).text(""); 
     error.insertAfter(element); 
    }, 
    errorElement: "div" 

Это создает правильный элемент ошибки, но при попытке отправить форму (с другими ошибками) элемент ошибки дублируется каждый раз.

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

+0

Зачем вам нужно помещать сообщение об ошибке внутри атрибута? Это * динамически * созданный элемент. Пожалуйста, объясните, почему вы не можете использовать стандартные способы установки настраиваемого сообщения об ошибке. – Sparky

ответ

0

Дублирование предположительно, вызвана помещая этот контейнер ошибки в вашей HTML разметки раньше времени, а затем пытается предназначаться его ...

error = error.attr("class", "error-holder").attr("data-error-message", .... 

Плагин автоматически создает элемент ошибки в дополнение к твоему и не знает (не может найти), какой из них переключить.


Вы можете установить контейнер ошибки в div ...

errorElement: "div" 

И вы можете установить класс ошибок в error-holder ...

errorClass: "error-holder" 

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

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

DEMO: http://jsfiddle.net/okwwrsd9/

$(document).ready(function() { 

    $('#myform').validate({ 
     errorElement: "div", 
     errorClass: "error-holder", 
     rules: { 
      foo: { 
       required: true 
      } 
     }, 
     messages: { 
      foo: { 
       required: "Please correct this field" 
      } 
     } 
    }); 

}); 
1

Я решил эту проблему с помощью первой проверки, если ошибка деление с уже существует:

errorPlacement: function (error, element) { 
     error = error.attr("class", "error-holder").attr("data-error-message", error.text()).text(""); 
     if ($("div[for=" + element.attr("id") + "]").length == 0) { 
      error.insertAfter(element); 
     } 
    } 

мне нужен этот конкретный DIV ошибки из-за конструктивных требований в CSS.

Thx за ответы!

+0

Это недостающее звено, которое мне нужно было для адаптации ненавязчивой проверки для mdbootstrap, спасибо. :) –

Смежные вопросы