Размещение ошибки проверки Jquery (переключатели)

Question

Я пытаюсь использовать плагин проверки Jquery для проверки моей формы. У меня есть сообщения об ошибках справа от большинства моих элементов ввода, но переключатели не дают мне ничего, кроме неприятностей.

Если я не указываю ширину для класса div.group, сообщение об ошибке появляется на внешней стороне полной страницы (так как я предполагаю, что ширина div равна 100% страницы?) Если ничего не сделать, ошибка будет сообщение появится после первого переключателя вместо второго. Я не могу жестко закодировать ширину, так как я хочу использовать ее в радиогруппах различной ширины. Как мне сделать так, чтобы он отображался у правого края везде, где заканчиваются радиокнопки в радиокнопках?

Спасибо!

var validator = $("#myForm").validate({
        errorElement: "div",
        wrapper: "div",  // a wrapper around the error message
        errorPlacement: function(error, element) {

            if (element.parent().hasClass('group')){
                element = element.parent();
            }


            offset = element.offset();
            error.insertBefore(element)
            error.addClass('message');  // add a class to the wrapper
            error.css('position', 'absolute');
            error.css('left', offset.left + element.outerWidth());
            error.css('top', offset.top);
    }
});

А потом

<p>
    <div class="group">
        <label>Gender</label>
        Male: <input id="gender_male" type="radio" name="gender" class="required" value="Male" />
        Female: <input id="gender_female" type="radio" name="gender" class="required" value="Female"  />
    </div>

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

РЕДАКТИРОВАТЬ: Ага, я просто использовал div.group {display: inline-block;}.

Answer 1

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

errorPlacement: function(error, element) {
  if (element.attr("name") == "PhoneFirst" || element.attr("name") == "PhoneMiddle" || element.attr("name") == "PhoneLast") {
     error.insertAfter("#requestorPhoneLast");
  } else {
     error.insertAfter(element);
  }
},

Answer 2

Не нужно даже JS errorPlacement, чтобы сделать это ... если просто разместить метку для переключателей, также работает так:

<label class="label_radio" for="answer_A">
  <input id="answer_A" name="answers[question1].choiceArray" type="radio" value="A"/>Yes
</label>
<label class="label_radio" for="answer_B">
  <input id="answer_B" name="answers[question1].choiceArray" type="radio" value="B"/>No
</label>

<label for="answers[question1].choiceArray" class="error" style="display:none;">* Please pick an option above</label>

Плагин Jquery Validation автоматически раскроет его и отобразит "требуемый"messsage.

Answer 3

Просто используйте CSS:

#myform div.group label.error {float:right;padding-left:10px;}

Answer 4

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

$('form').validate({
  errorPlacement:
  function(error, element){
    var id=element[0]['id'];
    $( element ).before( "<label for='"+id+"' class='error'>"+error.text()+"</label>" );
  }
});