jquery validation generate label .error вне метки

Question

У меня есть форма, и каждый текст ввода содержится в ярлыке. Как я могу сделать, чтобы метка, сгенерированная с помощью проверки jquery (.error), появляется за пределами входной текстовой метки?. Я получил сообщение об ошибке ниже текстового поля.

<form class="cmxform" id="commentForm" method="get" action=""> 
<fieldset> 
    <legend>Please complete form</legend> 
    <p> 
     <label for="cname">Name (required, at least 2 characters) 
     <input id="cname" name="name" minlength="2" type="text" required /> 
    </label> 
    <p> 
     <label for="cemail">E-Mail (required) 
     <input id="cemail" type="email" name="email" required /> 
    </label> 
    </p> 
    <p> 
     <label for="curl">URL (optional) 
     <input id="curl" type="url" name="url" /> 
    </label> 
    </p> 
    <p> 
     <label for="ccomment">Your comment (required) 
     <textarea id="ccomment" name="comment" required></textarea> 
    </label> 
    </p> 
    <p> 
     <input class="submit" type="submit" value="Submit"/> 
    </p> 
</fieldset> 
</form> 

http://jsfiddle.net/qh7cqhpn/

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

Answer 1

Просто измените the errorElement option (по умолчанию label) на div, и он автоматически перенесется на следующую строку. В противном случае вы можете изменить элемент ошибки на все, что пожелаете, или оставить его как label.

$("#commentForm").validate({ 
    errorElement: 'div' 
}); 

DEMO: http://jsfiddle.net/qh7cqhpn/1/

Если вы хотите разместить .error элемент за пределами существующего label в вашей структуре, то вы должны использовать функцию errorPlacement. .insertAfter(element.parent()) разместит его после родительского элемента (label) входного элемента.

$(document).ready(function() { 

    $("#commentForm").validate({ 
     errorElement: 'div', 
     errorPlacement: function(error, element) { 
      error.insertAfter(element.parent()); 
     } 
    }); 

}); 

DEMO 2: http://jsfiddle.net/qh7cqhpn/2/