最終的なエラーの形式を理解しきれなかったのですが、入力必須チェックのサンプルを提示します。基本的にはエラーがあったら、その文字を対象のテキストの上に表示して背景色を変更する物です。ヒントになればと思います。
同じエラーを出し続けない、という観点では
html
1$("p.error").remove();
2$("dl dd").removeClass("error");
で、エラー内容を初期化している、というところがポイントです。
html
1<html>
2 <head>
3 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
4 <script>
5 //お問い合わせフォームチェック
6 $(function(){
7 $('#js-error-inquiry').submit(function(){
8 //エラーの初期化
9 $("p.error").remove();
10 $("dl dd").removeClass("error");
11 var checkform = true;
12 $(":text,textarea").filter(".validate").each(function(){
13 //必須項目のチェック
14 $(this).filter(".required").each(function(){
15 if($(this).val()==""){
16 $(this).parent().prepend("<p class='error'>必須項目です</p>")
17 $("p.error").parent().addClass("error");
18 checkform = false;
19 }
20 });
21 })
22 return checkform;
23 });
24 });
25 </script>
26 <style type="text/css">
27 form {background-color:green;}
28 dl dd p.error{
29 margin:0;
30 color:red;
31 font-weight:bold;
32 margin-bottom:1em;
33 }
34 dl dd.error input {background:#FFCCCC;}
35 </style>
36 </head>
37 <body>
38 <form id="js-error-inquiry" class="inquiry-form" role="form"><!-- action="mail.php" -->
39 <dl>
40 <dd>
41 <input type="text" name="name" size="100" class="validate required" />
42 </dd>
43 <dd>
44 <input type="text" name="name" size="100" class="validate required" />
45 </dd>
46 </dl>
47 <button type="submit">test</button>
48 </form>
49 </body>
50</html>
追記(html全体)
html
1<html>
2 <head>
3 <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
4 <script>
5//お問い合わせフォームチェック
6 $(function(){
7$('#js-error-inquiry').submit(function(){
8 var checkform = true;
9 // 以下input一つ目
10 // inputタグ
11 if($('.js-is-input-error1').val() == ''){
12 //まだエラーメッセージが出力されていなければ、背景色を長くする
13 if($('.js-is-error--text-input1').text() == ''){
14 var heightGet = $('#js-height-adjustment').height(); // sectionタグ
15 //$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
16 $('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
17 }
18 // inputに文字が入っていなければ、必須項目と出るようにする。
19 // spanタグ
20 $('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
21 'text-shadow': '0px 0px 10px #fff,'+
22 '0px 0px 10px #fff,'+
23 '0px 0px 10px #fff,'+
24 '0px 0px 10px #fff,'+
25 '0px 0px 10px #fff,'+
26 '0px 0px 10px #fff,'+
27 '0px 0px 10px #fff,'+
28 '0px 0px 10px #fff,'+
29 '0px 0px 10px #fff,'+
30 '2px 2px 2px #fff'}); // +改行を可能にするために必要
31 checkform = false; // var省略
32 }else{
33 //既にエラーメッセージがあった場合は背景色の長さを元に戻す
34 if($('.js-is-error--text-input1').text() != ''){
35 var heightGet = $('#js-height-adjustment').height(); // sectionタグ
36 $('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
37 }
38 // inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
39 $('.js-is-error--text-input1').text(''); // spanタグ
40 }
41 return checkform;
42});
43 });
44 </script>
45 <style type="text/css">
46#js-height-adjustment{
47 background-color:red;
48height:500px;
49}
50.inquiry {
51 position: relative;
52 padding: 34rem 0 35.5rem 0;
53 width : 100%;
54 /*background: url(./img/common-img/inquery-back.png) no-repeat;*/
55 background-position: center center;
56 background-size: cover;
57}
58
59@media (min-width: 960px) {
60.inquiry {
61 padding: 53rem 0 28rem 0;
62}
63}
64
65/*入力フォーム一覧の位地*/
66.inquiry-wrap {
67 position: absolute;
68 top: 7.6%;
69 left: 8%;
70}
71
72@media (min-width: 640px) {
73.inquiry-wrap {
74 top: 7.6%;
75 left: 11%;
76}
77}
78
79@media (min-width: 960px) {
80.inquiry-wrap {
81 position: absolute;
82 top: 10.3%;
83 left: 11%;
84}
85}
86
87.heading2_color_white {
88 text-shadow:
89 1px 1px rgba(0, 0, 0, .2),
90 2px 2px rgba(0, 0, 0, .1),
91 3px 3px rgba(0, 0, 0, .1),
92 4px 4px rgba(0, 0, 0, .05),
93 5px 5px rgba(0, 0, 0, .05),
94 6px 6px rgba(0, 0, 0, .05)
95 ;
96}
97
98.heading2_color_white,.inquiry-form dt {
99 color: white;
100}
101
102.inquiry-form dt {
103 text-shadow:
104 0px 0px 10px #fff,
105 0px 0px 10px #fff,
106 0px 0px 10px #fff,
107 0px 0px 10px #fff,
108 0px 0px 10px #fff,
109 0px 0px 10px #fff,
110 0px 0px 10px #fff,
111 0px 0px 10px #fff,
112 0px 0px 10px #fff,
113 2px 2px 2px rgba(0,0,0,.9);
114 color: #000;
115 font-weight: bold;
116}
117
118/*フォーム~ボタンまでの横幅、行間一括指定、個人情報ボックス以外*/
119.inquiry-form__input-box input,.inquiry-form__body,.inquiry-form__primary-btn {
120 width: 90%;
121 height: 1.8em;
122 line-height: 1.8;
123 border-style: none;/*選択時の枠線を無くす*/
124}
125
126@media (min-width: 960px) {
127.inquiry-form__input-box input,.inquiry-form__body,.inquiry-form__primary-btn {
128 width: 40%;
129}
130}
131
132.inquiry-form__input-box,.inquiry-form__input-box_kind_textarea {
133 opacity: 0.7;
134}
135
136.inquiry-form__input-box {
137 margin-bottom: 1rem;
138}
139
140.inquiry-form__input-box_kind_textarea .inquiry-form__body {
141 margin-bottom: 2rem;
142 resize: horizontal;/*横のみリサイズ可能*/
143}
144
145/* コメントボックスの高さ */
146.inquiry-form__body {
147 height: 7rem;
148}
149
150@media (min-width: 960px) {
151.inquiry-form__body {
152 height: 10rem;
153}
154}
155/* /コメントボックスの高さ */
156
157.inquiry-form__privacy {
158 border: 0.1rem solid #03AFFF;
159 width: 78%;
160 padding: 2.3rem 3rem 0 3rem;
161 height: 12rem;
162 line-height: 2;
163 overflow-y: scroll;
164 background: #fff;
165 opacity: 0.7;
166}
167
168@media (min-width: 960px) {
169.inquiry-form__privacy {
170 width: 37%;
171}
172}
173
174.inquiry-form__primary-btn {
175 display: block;
176 margin-top: 4rem;
177 height: 5.5rem;
178 background: rgb(0, 239, 123);
179 color: #fff;
180 font-size: 2.7rem;
181 font-weight: bold;
182 letter-spacing: 2px;
183 line-height: 5.5rem;
184 text-align: center;
185 text-shadow: 1px 1px 0px #000,
186 -1px 1px 0px #000,
187 1px -1px 0px #000,
188 -1px -1px 0px #000;
189 box-shadow: 2px 2px 2px rgba(0,0,0,.9);
190}
191form {background-color:green;}
192 </style>
193 </head>
194 <body>
195<section id="js-height-adjustment" class="inquiry">
196 <div class="inquiry-wrap"><!-- コンタクトの要素をまとめてポジションで移動するため -->
197 <h2 id="js-inquiry" class="heading2_color_white heading2">CONTACT</h2>
198 <form id="js-error-inquiry" class="inquiry-form" method="post" role="form"><!-- action="mail.php" -->
199 <dl>
200 <dt>
201 <label for="name">お名前 (必須)</label>
202 </dt>
203 <span class="js-is-error--text-input1"></span>
204 <dd class="inquiry-form__input-box">
205 <input id="name" class="js-is-input-error1" name="name" onclick=””></dd>
206 <button class="inquiry-form__primary-btn js-fadein-from-bottom
207animation-hover action-hover" type="submit">ご相談完了</button>
208 </form>
209 </div><!-- /.inquiry-wrap -->
210 </section><!-- /#about -->
211 </body>
212</html>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2016/12/16 09:08
退会済みユーザー
2016/12/16 09:19
退会済みユーザー
2016/12/16 13:32
2016/12/19 03:59
退会済みユーザー
2016/12/19 04:20
2016/12/20 00:33
2016/12/20 00:43
退会済みユーザー
2016/12/20 01:41
2016/12/20 02:35
退会済みユーザー
2016/12/20 03:04
2016/12/20 04:54
退会済みユーザー
2016/12/20 05:07
退会済みユーザー
2016/12/20 05:16
2016/12/20 05:45
退会済みユーザー
2016/12/20 05:50
2016/12/20 05:55
退会済みユーザー
2016/12/20 06:04
2016/12/20 06:08
退会済みユーザー
2016/12/20 06:17
退会済みユーザー
2016/12/20 07:05
2016/12/20 07:30 編集
退会済みユーザー
2016/12/20 07:28
2016/12/20 07:39
退会済みユーザー
2016/12/20 08:04
退会済みユーザー
2016/12/20 08:06
2016/12/20 08:14
退会済みユーザー
2016/12/20 09:23
2016/12/20 09:24
退会済みユーザー
2016/12/20 09:41
退会済みユーザー
2016/12/21 03:32
2016/12/21 04:31
退会済みユーザー
2016/12/21 04:33
2016/12/21 04:44
退会済みユーザー
2016/12/21 04:58
退会済みユーザー
2016/12/21 05:37
退会済みユーザー
2016/12/21 05:46
退会済みユーザー
2016/12/21 05:47
2016/12/21 06:17 編集
退会済みユーザー
2016/12/21 06:24
2016/12/21 06:34
退会済みユーザー
2016/12/21 07:04
2016/12/21 07:49
退会済みユーザー
2016/12/21 08:41
退会済みユーザー
2016/12/21 08:42
2016/12/21 09:25
退会済みユーザー
2016/12/21 13:33
退会済みユーザー
2016/12/22 00:26
退会済みユーザー
2016/12/22 02:03
退会済みユーザー
2016/12/22 02:53
退会済みユーザー
2016/12/22 08:22
2016/12/23 10:21 編集
退会済みユーザー
2016/12/24 05:06
退会済みユーザー
2016/12/24 05:08