jQuery validationでエラーメッセージを入力欄の後にブロック要素として出したい

jQuery.validateでざっくりこんな感じのフォームがあったとします。
名前、IDに必須のバリデーションをかけ、それぞれ空欄だとエラーが出ます。

<form method="POST" id="register">
  <input name="name" type="text" >
  <input name="id" type="text" >
  <button type="submit">送信</button>
</form>

var validation = $('#register').validate({
    rules: {
      name: {
        required: true,
      },
      id: {
        required: true,
      },
    },
    messages: {
      name: {
        required: 'ユーザー名を入力してください',
      },
      id: {
        required: 'idを入力してください',
      },
    },
    
    errorPlacement: function (error, element) {
      error.insertAfter(element)
    },
  });

var result = validation.form();

これだと、実際に出るエラーメッセージは入力欄のすぐ横です。ちょっと格好悪い……。
改行させたい、ブロック要素として表示させたい場合は以下を追記します。

var validation = $('#register').validate({
    rules: {
      name: {
        required: true,
      },
      id: {
        required: true,
      },
    },
    messages: {
      name: {
        required: 'ユーザー名を入力してください',
      },
      id: {
        required: 'idを入力してください',
      },
    },
    // 一行追加
    errorElement: 'div',
    errorPlacement: function (error, element) {
      error.insertAfter(element)
    },
  });

var result = validation.form();

これで入力欄のすぐ下に出るようになりました。
あとはcssでerrorクラスの値をよしなにいじってやれば完成。

余談

errorElementでdivを指定しないと、デフォルトではlabelになります。

デフォルトのままにしていると、一つの項目でエラーが出たときそれ以外の項目の下（エラーメッセージが出る位置）にもメッセージ分の余白ができてしまうという不具合がありました。

divにするとこちらも解決しました。

メモ代わりに共有します。