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

Я пытаюсь использовать плагин проверки 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>

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

EDIT: Ага, я просто использовал div.group {display: inline-block;}.

Ответы

Ответ 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);
  }
},

Ответ 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.

Ответ 3

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

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

Ответ 4

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

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