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

只需將errorElement選項 （默認label ）更改為div ，它將自動換行到下一行。 否則，您可以將error元素更改為所需的任何內容，或將其保留為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/