Как мне переместить ошибку проверки формы - PullRequest
Новая
       8

Как мне переместить ошибку проверки формы

0 голосов
/ 18 октября 2018

Я использую средство проверки формы jQuery , которое, по большей части, было очень успешным (особенно здорово с условной проверкой).Однако у меня возникла ошибка позиционирования, которую я не смог решить.

Я проверяю серию флажков, где мне нужно, чтобы пользователь выбрал хотя бы один флажок.Эта библиотека имеет функцию, которая обрабатывает это, добавляя несколько атрибутов к первому входу флажка в серии.Вот мой код: 

          <label id="cb1">
          <input type="checkbox" name="CheckboxGroup1[]" value="Teacher/professor/clinician-educator" id="CheckboxGroup1_0" data-validation="checkbox_group" data-validation-qty="min1" data-validation-error-msg="Please select at least one checkbox" >
          <span id="firstLabel">Teacher/professor/clinician-educator facilitated the session</span></label>

        <label>
          <input type="checkbox" name="CheckboxGroup1[]" value="large-group" id="CheckboxGroup1_1">
          Large group (&gt; 50 individuals)</label>

Я добавил немного дополнительной разметки (id = "cb1", и поэтому я мог попытаться манипулировать позицией сообщения об ошибке и размещать его над серией флажков, а не после первогофлажок (см. скриншот ниже).

Вот код после того, как сгенерирована ошибка проверки: 

<label id="cb1" class="has-error">
          <input name="CheckboxGroup1[]" value="Teacher/professor/clinician-educator" id="CheckboxGroup1_0" data-validation="checkbox_group" data-validation-qty="min1" data-validation-error-msg="Please select at least one checkbox" current-error="Please select at least one checkbox" class="error" style="border-color: rgb(255, 0, 0);" type="checkbox">

          <span id="firstLabel">Teacher/professor/clinician-educator facilitated the session</span>

Пожалуйста, выберите хотя бы один флажок Большая группа (> 50 человек)

Я испробовал все способы изменения верхнего края для введенного кода (<span class="help-block form-error">Please select at least one checkbox</span>), включая следующие: 

#cb1.has-error span {
  margin-top: -45px;    
}
#cb1.has-error span#firstLabel {
  display: inline;
  margin-top: 20px;
}

Есть предложения? Я обратился к основному автору, но еще не получилответ, и мой клиент зудит.

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

  • Джо

enter image description here

1 Ответ

0 голосов
/ 18 октября 2018

Вы можете определить пользовательский контейнер сообщений для определенного ввода. 

<div id="email-error-dialog"></div>
  <p>
 E-mail:
<input type="email" name="user-email" data-validation="email" 
     data-validation-error-msg="You did not enter a valid e-mail" 
     data-validation-error-msg-container="#email-error-dialog">
 </p>

source: http://www.formvalidator.net/#configuration_position

...