jquery验证在标签外生成标签.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/