エラー表示位置変更したい

v.js
1  $(function(){
2    $('form').validate({
3      rules:{
4        text1:{required:true},
5        text2:{required:true},
6        gender:{required:true}
7      },
8      messages:{
9        text1:{
10          required:"必須項目です",
11        },
12        text2:{
13          required:"必須項目です",
14        },
15        gender:{
16          required:"必須項目です",
17        }
18      },
19        errorPlacement: function(error, element){
20         error.appendTo($('#message'));
21       }
22    });
23  });
24

javascript
1<!doctype html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title></title>
6<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
7<script type="text/javascript" src="js/jquery.validate.min.js"></script>
8<script type="text/javascript" src="js/v.js"></script>
9
10</head>
11<body>
12  <form>
13    <input name="text1" type="text"><br>
14    <input name="text2" type="text"><br>
15    <input type="radio" id="gender" name="gender" value="men">男性
16    <input type="radio" id="gender" name="gender" value="woman">女性
17    <br>
18    <button>確認</button>
19
20  </form>
21  <div id="message"></div>
22</body>
23</html>

現在全てのformのエラー表示位置が確認ボタンの下になっているのですが、
全ての入力項目の右側にエラー表示を行いたいです。どうすればできますか？

行動規範の内容に同意します

回答1件

参考サイト

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="utf-8">
5    <title></title>
6    <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
7    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jquery-validation@1.19.1/dist/jquery.validate.min.js"></script>
8</head>
9<body>
10  <form>
11    <input name="text1" type="text" data-error_place="#text1_error"><span id="text1_error"></span><br>
12    <input name="text2" type="text" data-error_place="#text2_error"><span id="text2_error"></span><br>
13    <input type="radio" id="gender" name="gender" value="men" data-error_place="#gender_error">男性
14    <input type="radio" id="gender" name="gender" value="woman" data-error_place="#gender_error">女性
15    <span id="gender_error"></span>
16    <br>
17    <button>確認</button>
18
19  </form>
20  <div id="message"></div>
21</body>
22<script>
23  $(function(){
24    $('form').validate({
25      rules:{
26        text1:{required:true},
27        text2:{required:true},
28        gender:{required:true}
29      },
30      messages:{
31        text1:{
32          required:"必須項目です",
33        },
34        text2:{
35          required:"必須項目です",
36        },
37        gender:{
38          required:"必須項目です",
39        }
40      },
41      errorPlacement: function(error, element){
42         error.appendTo(element.data('error_place'));
43      }
44    });
45  });
46</script>
47</html>