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 class 时出现在输入文本的标签之外。我想知道一种有效的方法来做到这一点。我可以在一个表单上有30个字段，然后想一个字段一个字段地修改。谢谢。

Answer 1

只需将the errorElement option（默认label）更改为div，它会自动换行到下一行。否则，您可以将错误元素更改为您想要的任何内容或将其保留为 label.

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

演示：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());
        }
    });

});

演示 2：http://jsfiddle.net/qh7cqhpn/2/

jquery validation generate label .error 在标签外

jquery validation generate label .error outside the label

jquery

jquery-validate