JQuery Validate Проблема при использовании начальной загрузки Col-хз

Question

JQuery Validate Проблема при использовании начальной загрузки

Я использую JQuery Validate и ниже мой код

 errorElement: 'div', 
     errorClass: 'has-error', 
     errorPlacement: function(error, element) { 
     error 
      .css('background-color', '#000000') 
      error.insertAfter(element.parent('div')); 
     }, 
     highlight: function(element, errorClass, validClass) { 
      $(element).addClass(errorClass).removeClass(validClass); 
      $(element.form).find("label[for=" + element.id + "]") 
      .addClass(errorClass); 
     }, 
     unhighlight: function(element, errorClass, validClass) { 
$(element).removeClass(errorClass).addClass(validClass); 
      $(element.form).find("label[for=" + element.id + "]") 
      .removeClass(errorClass); 
     } 

Проблема с приведенным выше кодом, потому что

если я использую нормальный div, как это

<div class="input text required"><label for="my_pay">Basic Pay</label> 
<input id="my_pay" name="my_pay" maxlength="64" type="text" /> 
</div> 

Его работы прекрасные, проверка m ниже.

Но когда я использую

<div class="row"> 

<div class="col-xs-4"><div class="input text required"> 
    <input id="name" name="name" maxlength="64" type="text" /> 
</div></div> 

<div class="col-xs-4"><div class="input text required"> 
    <input id="weight" name="weight" maxlength="64" type="text" /> 
</div></div> 

</div> 

проверки будет отображаться в правой части текстового поля Col-хз-6 и исходное текстовое поле будет толкать вниз и макет будет искажен.

Такие, как, например

[  Text Field  ] [  Text Field  ] 

Если проверить это станет

[  Text Field  ] validate message 
[  Text Field  ] validate message 

То, что я хочу, это сообщение Validate появляется снизу 2 текстовых полей, что является начальной загрузки

[  Text Field  ] [  Text Field  ] 
Validate Message 
Validate Message 

Проблема в том, что мой код также должен работать для нормального div, который не является загрузочным.

поле, что у меня есть для начальной загрузки является имя и вес

спасибо за помощь !!

Answer 1

Ваш соответствующий код ...

errorPlacement: function(error, element) { 
    error.css('background-color', '#000000') 
    error.insertAfter(element.parent('div')); 
}, 

1. REMOVE error.css('background-color', '#000000') полностью. Вы не должны возиться с CSS изнутри функции errorPlacement. Это даже не имеет смысла делать это с помощью jQuery, когда вы можете просто указать это правило с помощью CSS в первую очередь.

2. error.insertAfter(element.parent('div')) помещает свой элемент сообщения об ошибке вне из div, который содержит ваш input элемент. Я не понимаю, что вы действительно хотите, но на основе того, что вы показали, просто используя функцию по умолчанию errorPlacement, я бы поставил элемент сообщения внутри в контейнер и сразу после каждого элемента input. Поскольку ваше сообщение об ошибке является div, оно должно уже появляться в новой строке под каждым input. Другими словами, полностью удалите опцию errorPlacement и посмотрите, что произойдет. Однако мы абсолютно не знаем, как влияет ваш CSS на все это.

В противном случае, вы будете иметь, чтобы проверить живой DOM, используя свои инструменты браузера, чтобы увидеть, где плагин вставляет сообщение и то, что CSS делает. Тогда, если не правильно, выясните, где именно это должно быть ...затем соответствующим образом отредактируйте CSS и/или HTML. Исправьте динамический HTML, отредактировав код в пределах errorPlacement.