回答編集履歴
11
html全体を登録
answer
CHANGED
|
@@ -58,8 +58,12 @@
|
|
|
58
58
|
</html>
|
|
59
59
|
```
|
|
60
60
|
|
|
61
|
-
> 追記(
|
|
61
|
+
> 追記(html全体)
|
|
62
|
+
```html
|
|
63
|
+
<html>
|
|
64
|
+
<head>
|
|
65
|
+
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
|
|
62
|
-
|
|
66
|
+
<script>
|
|
63
67
|
//お問い合わせフォームチェック
|
|
64
68
|
$(function(){
|
|
65
69
|
$('#js-error-inquiry').submit(function(){
|
|
@@ -70,6 +74,7 @@
|
|
|
70
74
|
//まだエラーメッセージが出力されていなければ、背景色を長くする
|
|
71
75
|
if($('.js-is-error--text-input1').text() == ''){
|
|
72
76
|
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
77
|
+
//$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
|
|
73
78
|
$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
|
|
74
79
|
}
|
|
75
80
|
// inputに文字が入っていなければ、必須項目と出るようにする。
|
|
@@ -95,71 +100,176 @@
|
|
|
95
100
|
// inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
|
|
96
101
|
$('.js-is-error--text-input1').text(''); // spanタグ
|
|
97
102
|
}
|
|
98
|
-
// 以下input二つ目
|
|
99
|
-
// inputタグ
|
|
100
|
-
if($('.js-is-input-error2').val() == ''){
|
|
101
|
-
if($('.js-is-error--text-input2').text() == ''){
|
|
102
|
-
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
103
|
-
$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
|
|
104
|
-
}
|
|
105
|
-
// inputに文字が入っていなければ、必須項目と出るようにする。
|
|
106
|
-
$('.js-is-error--text-input2').text('必須項目です').css({'color': 'red',
|
|
107
|
-
'text-shadow': '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
|
-
'0px 0px 10px #fff,'+
|
|
114
|
-
'0px 0px 10px #fff,'+
|
|
115
|
-
'0px 0px 10px #fff,'+
|
|
116
|
-
'2px 2px 2px #fff'}); // +改行を可能にするために必要
|
|
117
|
-
|
|
118
|
-
checkform = false; // var省略
|
|
119
|
-
}else{
|
|
120
|
-
//既にエラーメッセージがあった場合は背景色の長さを元に戻す
|
|
121
|
-
if($('.js-is-error--text-input2').text() != ''){
|
|
122
|
-
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
123
|
-
$('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
|
|
124
|
-
}
|
|
125
|
-
// inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
|
|
126
|
-
$('.js-is-error--text-input2').text(''); // spanタグ
|
|
127
|
-
}
|
|
128
|
-
// 以下textarea
|
|
129
|
-
if($('.js-is-error-body').val() == ''){
|
|
130
|
-
//既にエラーメッセージがあった場合は背景色の長さを元に戻す
|
|
131
|
-
if($('.js-is-error--text-texarea').text() == ''){
|
|
132
|
-
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
133
|
-
$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
|
|
134
|
-
}
|
|
135
|
-
$('.js-is-error--text-texarea').text('必須項目です').text('必須項目です').css({'color': 'red',
|
|
136
|
-
'text-shadow': '0px 0px 10px #fff,'+
|
|
137
|
-
'0px 0px 10px #fff,'+
|
|
138
|
-
'0px 0px 10px #fff,'+
|
|
139
|
-
'0px 0px 10px #fff,'+
|
|
140
|
-
'0px 0px 10px #fff,'+
|
|
141
|
-
'0px 0px 10px #fff,'+
|
|
142
|
-
'0px 0px 10px #fff,'+
|
|
143
|
-
'0px 0px 10px #fff,'+
|
|
144
|
-
'0px 0px 10px #fff,'+
|
|
145
|
-
'2px 2px 2px #fff'}); // +改行を可能にするために必要
|
|
146
|
-
checkform = false;
|
|
147
|
-
}else{
|
|
148
|
-
//既にエラーメッセージがあった場合は背景色の長さを元に戻す
|
|
149
|
-
if($('.js-is-error--text-texarea').text() != ''){
|
|
150
|
-
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
151
|
-
$('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
|
|
152
|
-
}
|
|
153
|
-
$('.js-is-error--text-texarea').text(''); // spanタグ
|
|
154
|
-
}
|
|
155
|
-
// return checkform（変数 ）（テキストが入っている場合はture、入っていない場合はfalseが変数に入る。）
|
|
156
|
-
// return checkform;は変数の指定位置までもどる。checkform変数に戻ってくださいということ。
|
|
157
|
-
// return false;の場合は、送信ボタンが実行されないようにしている。
|
|
158
|
-
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
159
|
-
//$('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
|
|
160
103
|
return checkform;
|
|
161
104
|
});
|
|
162
105
|
});
|
|
106
|
+
</script>
|
|
107
|
+
<style type="text/css">
|
|
108
|
+
#js-height-adjustment{
|
|
109
|
+
background-color:red;
|
|
110
|
+
height:500px;
|
|
111
|
+
}
|
|
112
|
+
.inquiry {
|
|
113
|
+
position: relative;
|
|
114
|
+
padding: 34rem 0 35.5rem 0;
|
|
115
|
+
width : 100%;
|
|
116
|
+
/*background: url(./img/common-img/inquery-back.png) no-repeat;*/
|
|
117
|
+
background-position: center center;
|
|
118
|
+
background-size: cover;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
@media (min-width: 960px) {
|
|
122
|
+
.inquiry {
|
|
123
|
+
padding: 53rem 0 28rem 0;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
/*入力フォーム一覧の位地*/
|
|
128
|
+
.inquiry-wrap {
|
|
129
|
+
position: absolute;
|
|
130
|
+
top: 7.6%;
|
|
131
|
+
left: 8%;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
@media (min-width: 640px) {
|
|
135
|
+
.inquiry-wrap {
|
|
136
|
+
top: 7.6%;
|
|
137
|
+
left: 11%;
|
|
138
|
+
}
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
@media (min-width: 960px) {
|
|
142
|
+
.inquiry-wrap {
|
|
143
|
+
position: absolute;
|
|
144
|
+
top: 10.3%;
|
|
145
|
+
left: 11%;
|
|
146
|
+
}
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.heading2_color_white {
|
|
150
|
+
text-shadow:
|
|
151
|
+
1px 1px rgba(0, 0, 0, .2),
|
|
152
|
+
2px 2px rgba(0, 0, 0, .1),
|
|
153
|
+
3px 3px rgba(0, 0, 0, .1),
|
|
154
|
+
4px 4px rgba(0, 0, 0, .05),
|
|
155
|
+
5px 5px rgba(0, 0, 0, .05),
|
|
156
|
+
6px 6px rgba(0, 0, 0, .05)
|
|
157
|
+
;
|
|
158
|
+
}
|
|
159
|
+
|
|
160
|
+
.heading2_color_white,.inquiry-form dt {
|
|
161
|
+
color: white;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.inquiry-form dt {
|
|
165
|
+
text-shadow:
|
|
166
|
+
0px 0px 10px #fff,
|
|
167
|
+
0px 0px 10px #fff,
|
|
168
|
+
0px 0px 10px #fff,
|
|
169
|
+
0px 0px 10px #fff,
|
|
170
|
+
0px 0px 10px #fff,
|
|
171
|
+
0px 0px 10px #fff,
|
|
172
|
+
0px 0px 10px #fff,
|
|
173
|
+
0px 0px 10px #fff,
|
|
174
|
+
0px 0px 10px #fff,
|
|
175
|
+
2px 2px 2px rgba(0,0,0,.9);
|
|
176
|
+
color: #000;
|
|
177
|
+
font-weight: bold;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
/*フォーム～ボタンまでの横幅、行間一括指定、個人情報ボックス以外*/
|
|
181
|
+
.inquiry-form__input-box input,.inquiry-form__body,.inquiry-form__primary-btn {
|
|
182
|
+
width: 90%;
|
|
183
|
+
height: 1.8em;
|
|
184
|
+
line-height: 1.8;
|
|
185
|
+
border-style: none;/*選択時の枠線を無くす*/
|
|
186
|
+
}
|
|
187
|
+
|
|
188
|
+
@media (min-width: 960px) {
|
|
189
|
+
.inquiry-form__input-box input,.inquiry-form__body,.inquiry-form__primary-btn {
|
|
190
|
+
width: 40%;
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.inquiry-form__input-box,.inquiry-form__input-box_kind_textarea {
|
|
195
|
+
opacity: 0.7;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.inquiry-form__input-box {
|
|
199
|
+
margin-bottom: 1rem;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.inquiry-form__input-box_kind_textarea .inquiry-form__body {
|
|
203
|
+
margin-bottom: 2rem;
|
|
204
|
+
resize: horizontal;/*横のみリサイズ可能*/
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
/* コメントボックスの高さ */
|
|
208
|
+
.inquiry-form__body {
|
|
209
|
+
height: 7rem;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
@media (min-width: 960px) {
|
|
213
|
+
.inquiry-form__body {
|
|
214
|
+
height: 10rem;
|
|
215
|
+
}
|
|
216
|
+
}
|
|
217
|
+
/* /コメントボックスの高さ */
|
|
218
|
+
|
|
219
|
+
.inquiry-form__privacy {
|
|
220
|
+
border: 0.1rem solid #03AFFF;
|
|
221
|
+
width: 78%;
|
|
222
|
+
padding: 2.3rem 3rem 0 3rem;
|
|
223
|
+
height: 12rem;
|
|
224
|
+
line-height: 2;
|
|
225
|
+
overflow-y: scroll;
|
|
226
|
+
background: #fff;
|
|
227
|
+
opacity: 0.7;
|
|
228
|
+
}
|
|
229
|
+
|
|
230
|
+
@media (min-width: 960px) {
|
|
231
|
+
.inquiry-form__privacy {
|
|
232
|
+
width: 37%;
|
|
233
|
+
}
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.inquiry-form__primary-btn {
|
|
237
|
+
display: block;
|
|
238
|
+
margin-top: 4rem;
|
|
239
|
+
height: 5.5rem;
|
|
240
|
+
background: rgb(0, 239, 123);
|
|
241
|
+
color: #fff;
|
|
242
|
+
font-size: 2.7rem;
|
|
243
|
+
font-weight: bold;
|
|
244
|
+
letter-spacing: 2px;
|
|
245
|
+
line-height: 5.5rem;
|
|
246
|
+
text-align: center;
|
|
247
|
+
text-shadow: 1px 1px 0px #000,
|
|
248
|
+
-1px 1px 0px #000,
|
|
249
|
+
1px -1px 0px #000,
|
|
250
|
+
-1px -1px 0px #000;
|
|
251
|
+
box-shadow: 2px 2px 2px rgba(0,0,0,.9);
|
|
252
|
+
}
|
|
253
|
+
form {background-color:green;}
|
|
254
|
+
</style>
|
|
255
|
+
</head>
|
|
256
|
+
<body>
|
|
257
|
+
<section id="js-height-adjustment" class="inquiry">
|
|
258
|
+
<div class="inquiry-wrap"><!-- コンタクトの要素をまとめてポジションで移動するため -->
|
|
259
|
+
<h2 id="js-inquiry" class="heading2_color_white heading2">CONTACT</h2>
|
|
260
|
+
<form id="js-error-inquiry" class="inquiry-form" method="post" role="form"><!-- action="mail.php" -->
|
|
261
|
+
<dl>
|
|
262
|
+
<dt>
|
|
263
|
+
<label for="name">お名前 (必須)</label>
|
|
264
|
+
</dt>
|
|
265
|
+
<span class="js-is-error--text-input1"></span>
|
|
266
|
+
<dd class="inquiry-form__input-box">
|
|
267
|
+
<input id="name" class="js-is-input-error1" name="name" onclick=””></dd>
|
|
268
|
+
<button class="inquiry-form__primary-btn js-fadein-from-bottom
|
|
269
|
+
animation-hover action-hover" type="submit">ご相談完了</button>
|
|
270
|
+
</form>
|
|
271
|
+
</div><!-- /.inquiry-wrap -->
|
|
272
|
+
</section><!-- /#about -->
|
|
273
|
+
</body>
|
|
274
|
+
</html>
|
|
163
275
|
```
|
|
164
|
-
codepenでjqueryが有効になっていないので、これを設定して下さい。settingボタンを押すと出てきますよ。
|
|
165
|
-
|
10
codepenの使い方を追記
answer
CHANGED
|
@@ -160,4 +160,6 @@
|
|
|
160
160
|
return checkform;
|
|
161
161
|
});
|
|
162
162
|
});
|
|
163
|
-
```
|
|
163
|
+
```
|
|
164
|
+
codepenでjqueryが有効になっていないので、これを設定して下さい。settingボタンを押すと出てきますよ。
|
|
165
|
+
|
9
書式の改善
answer
CHANGED
|
@@ -159,4 +159,5 @@
|
|
|
159
159
|
//$('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
|
|
160
160
|
return checkform;
|
|
161
161
|
});
|
|
162
|
-
});
|
|
162
|
+
});
|
|
163
|
+
```
|
8
javascriptの内容を修正
answer
CHANGED
|
@@ -60,7 +60,7 @@
|
|
|
60
60
|
|
|
61
61
|
> 追記(頂いたソースを加工したもの(javascript全体)
|
|
62
62
|
```javascript
|
|
63
|
-
|
|
63
|
+
//お問い合わせフォームチェック
|
|
64
64
|
$(function(){
|
|
65
65
|
$('#js-error-inquiry').submit(function(){
|
|
66
66
|
var checkform = true;
|
|
@@ -69,9 +69,8 @@
|
|
|
69
69
|
if($('.js-is-input-error1').val() == ''){
|
|
70
70
|
//まだエラーメッセージが出力されていなければ、背景色を長くする
|
|
71
71
|
if($('.js-is-error--text-input1').text() == ''){
|
|
72
|
-
alert('通った');
|
|
73
72
|
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
74
|
-
$('
|
|
73
|
+
$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
|
|
75
74
|
}
|
|
76
75
|
// inputに文字が入っていなければ、必須項目と出るようにする。
|
|
77
76
|
// spanタグ
|
|
@@ -86,14 +85,12 @@
|
|
|
86
85
|
'0px 0px 10px #fff,'+
|
|
87
86
|
'0px 0px 10px #fff,'+
|
|
88
87
|
'2px 2px 2px #fff'}); // +改行を可能にするために必要
|
|
89
|
-
|
|
90
88
|
checkform = false; // var省略
|
|
91
89
|
}else{
|
|
92
90
|
//既にエラーメッセージがあった場合は背景色の長さを元に戻す
|
|
93
91
|
if($('.js-is-error--text-input1').text() != ''){
|
|
94
|
-
alert('通った2');
|
|
95
92
|
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
96
|
-
$('
|
|
93
|
+
$('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
|
|
97
94
|
}
|
|
98
95
|
// inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
|
|
99
96
|
$('.js-is-error--text-input1').text(''); // spanタグ
|
|
@@ -101,6 +98,10 @@
|
|
|
101
98
|
// 以下input二つ目
|
|
102
99
|
// inputタグ
|
|
103
100
|
if($('.js-is-input-error2').val() == ''){
|
|
101
|
+
if($('.js-is-error--text-input2').text() == ''){
|
|
102
|
+
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
103
|
+
$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
|
|
104
|
+
}
|
|
104
105
|
// inputに文字が入っていなければ、必須項目と出るようにする。
|
|
105
106
|
$('.js-is-error--text-input2').text('必須項目です').css({'color': 'red',
|
|
106
107
|
'text-shadow': '0px 0px 10px #fff,'+
|
|
@@ -113,15 +114,24 @@
|
|
|
113
114
|
'0px 0px 10px #fff,'+
|
|
114
115
|
'0px 0px 10px #fff,'+
|
|
115
116
|
'2px 2px 2px #fff'}); // +改行を可能にするために必要
|
|
116
|
-
|
|
117
|
+
|
|
117
|
-
$('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
|
|
118
118
|
checkform = false; // var省略
|
|
119
119
|
}else{
|
|
120
|
+
//既にエラーメッセージがあった場合は背景色の長さを元に戻す
|
|
121
|
+
if($('.js-is-error--text-input2').text() != ''){
|
|
122
|
+
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
123
|
+
$('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
|
|
124
|
+
}
|
|
120
125
|
// inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
|
|
121
126
|
$('.js-is-error--text-input2').text(''); // spanタグ
|
|
122
127
|
}
|
|
123
128
|
// 以下textarea
|
|
124
129
|
if($('.js-is-error-body').val() == ''){
|
|
130
|
+
//既にエラーメッセージがあった場合は背景色の長さを元に戻す
|
|
131
|
+
if($('.js-is-error--text-texarea').text() == ''){
|
|
132
|
+
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
133
|
+
$('.inquiry').css('height', heightGet + 'px').css('height','+=1em');
|
|
134
|
+
}
|
|
125
135
|
$('.js-is-error--text-texarea').text('必須項目です').text('必須項目です').css({'color': 'red',
|
|
126
136
|
'text-shadow': '0px 0px 10px #fff,'+
|
|
127
137
|
'0px 0px 10px #fff,'+
|
|
@@ -135,6 +145,11 @@
|
|
|
135
145
|
'2px 2px 2px #fff'}); // +改行を可能にするために必要
|
|
136
146
|
checkform = false;
|
|
137
147
|
}else{
|
|
148
|
+
//既にエラーメッセージがあった場合は背景色の長さを元に戻す
|
|
149
|
+
if($('.js-is-error--text-texarea').text() != ''){
|
|
150
|
+
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
151
|
+
$('.inquiry').css('height', heightGet + 'px').css('height','-=1em');
|
|
152
|
+
}
|
|
138
153
|
$('.js-is-error--text-texarea').text(''); // spanタグ
|
|
139
154
|
}
|
|
140
155
|
// return checkform（変数 ）（テキストが入っている場合はture、入っていない場合はfalseが変数に入る。）
|
|
@@ -144,5 +159,4 @@
|
|
|
144
159
|
//$('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
|
|
145
160
|
return checkform;
|
|
146
161
|
});
|
|
147
|
-
});
|
|
162
|
+
});```
|
|
148
|
-
```
|
7
javascriptが誤ったロジックだったので訂正
answer
CHANGED
|
@@ -60,7 +60,6 @@
|
|
|
60
60
|
|
|
61
61
|
> 追記(頂いたソースを加工したもの(javascript全体)
|
|
62
62
|
```javascript
|
|
63
|
-
<script>
|
|
64
63
|
//お問い合わせフォームチェック
|
|
65
64
|
$(function(){
|
|
66
65
|
$('#js-error-inquiry').submit(function(){
|
|
@@ -68,6 +67,12 @@
|
|
|
68
67
|
// 以下input一つ目
|
|
69
68
|
// inputタグ
|
|
70
69
|
if($('.js-is-input-error1').val() == ''){
|
|
70
|
+
//まだエラーメッセージが出力されていなければ、背景色を長くする
|
|
71
|
+
if($('.js-is-error--text-input1').text() == ''){
|
|
72
|
+
alert('通った');
|
|
73
|
+
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
74
|
+
$('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
|
|
75
|
+
}
|
|
71
76
|
// inputに文字が入っていなければ、必須項目と出るようにする。
|
|
72
77
|
// spanタグ
|
|
73
78
|
$('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
|
|
@@ -84,26 +89,15 @@
|
|
|
84
89
|
|
|
85
90
|
checkform = false; // var省略
|
|
86
91
|
}else{
|
|
92
|
+
//既にエラーメッセージがあった場合は背景色の長さを元に戻す
|
|
93
|
+
if($('.js-is-error--text-input1').text() != ''){
|
|
94
|
+
alert('通った2');
|
|
95
|
+
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
96
|
+
$('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
|
|
97
|
+
}
|
|
87
|
-
|
|
98
|
+
// inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
|
|
88
|
-
|
|
99
|
+
$('.js-is-error--text-input1').text(''); // spanタグ
|
|
89
100
|
}
|
|
90
|
-
//既にエラーが表示されていてチェックフォームが正常なら1emをマイナスする
|
|
91
|
-
if($('.js-is-error--text-input1').val() != ''){
|
|
92
|
-
alert('b');
|
|
93
|
-
alert(checkform);
|
|
94
|
-
if(checkform){
|
|
95
|
-
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
96
|
-
$('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
|
|
97
|
-
}
|
|
98
|
-
}else{
|
|
99
|
-
alert('a');
|
|
100
|
-
alert(checkform);
|
|
101
|
-
if(!checkform){
|
|
102
|
-
// 背景の縦幅を必須項目というテキスト分高くする。
|
|
103
|
-
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
104
|
-
$('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
101
|
// 以下input二つ目
|
|
108
102
|
// inputタグ
|
|
109
103
|
if($('.js-is-input-error2').val() == ''){
|
|
@@ -151,5 +145,4 @@
|
|
|
151
145
|
return checkform;
|
|
152
146
|
});
|
|
153
147
|
});
|
|
154
|
-
</script>
|
|
155
148
|
```
|
6
javascriptを変更
answer
CHANGED
|
@@ -58,8 +58,9 @@
|
|
|
58
58
|
</html>
|
|
59
59
|
```
|
|
60
60
|
|
|
61
|
-
> 追記(頂いたソースを加工したもの(javascript
|
|
61
|
+
> 追記(頂いたソースを加工したもの(javascript全体)
|
|
62
62
|
```javascript
|
|
63
|
+
<script>
|
|
63
64
|
//お問い合わせフォームチェック
|
|
64
65
|
$(function(){
|
|
65
66
|
$('#js-error-inquiry').submit(function(){
|
|
@@ -80,14 +81,29 @@
|
|
|
80
81
|
'0px 0px 10px #fff,'+
|
|
81
82
|
'0px 0px 10px #fff,'+
|
|
82
83
|
'2px 2px 2px #fff'}); // +改行を可能にするために必要
|
|
83
|
-
|
|
84
|
+
|
|
84
|
-
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
85
|
-
//$('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
|
|
86
85
|
checkform = false; // var省略
|
|
87
86
|
}else{
|
|
88
|
-
|
|
87
|
+
// inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
|
|
89
|
-
|
|
88
|
+
$('.js-is-error--text-input1').text(''); // spanタグ
|
|
90
89
|
}
|
|
90
|
+
//既にエラーが表示されていてチェックフォームが正常なら1emをマイナスする
|
|
91
|
+
if($('.js-is-error--text-input1').val() != ''){
|
|
92
|
+
alert('b');
|
|
93
|
+
alert(checkform);
|
|
94
|
+
if(checkform){
|
|
95
|
+
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
96
|
+
$('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
|
|
97
|
+
}
|
|
98
|
+
}else{
|
|
99
|
+
alert('a');
|
|
100
|
+
alert(checkform);
|
|
101
|
+
if(!checkform){
|
|
102
|
+
// 背景の縦幅を必須項目というテキスト分高くする。
|
|
103
|
+
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
104
|
+
$('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
|
|
105
|
+
}
|
|
106
|
+
}
|
|
91
107
|
// 以下input二つ目
|
|
92
108
|
// inputタグ
|
|
93
109
|
if($('.js-is-input-error2').val() == ''){
|
|
@@ -104,13 +120,12 @@
|
|
|
104
120
|
'0px 0px 10px #fff,'+
|
|
105
121
|
'2px 2px 2px #fff'}); // +改行を可能にするために必要
|
|
106
122
|
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
107
|
-
|
|
123
|
+
$('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
|
|
108
124
|
checkform = false; // var省略
|
|
109
125
|
}else{
|
|
110
126
|
// inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
|
|
111
127
|
$('.js-is-error--text-input2').text(''); // spanタグ
|
|
112
128
|
}
|
|
113
|
-
|
|
114
129
|
// 以下textarea
|
|
115
130
|
if($('.js-is-error-body').val() == ''){
|
|
116
131
|
$('.js-is-error--text-texarea').text('必須項目です').text('必須項目です').css({'color': 'red',
|
|
@@ -136,22 +151,5 @@
|
|
|
136
151
|
return checkform;
|
|
137
152
|
});
|
|
138
153
|
});
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
> 判定追記(既にある$('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');はコメントアウトしてから使う)
|
|
142
|
-
(例)お名前のエラーチェックの後にこの判定を追加
|
|
143
|
-
|
|
154
|
+
</script>
|
|
144
|
-
//既にエラーが表示されていてチェックフォームが正常なら1emをマイナスする
|
|
145
|
-
if($('.js-is-error--text-input1').text() != ''){
|
|
146
|
-
if(checkform){
|
|
147
|
-
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
148
|
-
$('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
|
|
149
|
-
}
|
|
150
|
-
}else{
|
|
151
|
-
if(!checkform){
|
|
152
|
-
// 背景の縦幅を必須項目というテキスト分高くする。
|
|
153
|
-
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
154
|
-
$('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
|
|
155
|
-
}
|
|
156
|
-
}
|
|
157
155
|
```
|
5
回答が見辛かったので画像を削除
answer
CHANGED
|
@@ -138,9 +138,6 @@
|
|
|
138
138
|
});
|
|
139
139
|
```
|
|
140
140
|
|
|
141
|
-
> 画面キャプチャ
|
|
142
|
-
|
|
143
|
-
|
|
144
141
|
> 判定追記(既にある$('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');はコメントアウトしてから使う)
|
|
145
142
|
(例)お名前のエラーチェックの後にこの判定を追加
|
|
146
143
|
```javascript
|
4
javascriptの判定例文を追記
answer
CHANGED
|
@@ -139,4 +139,22 @@
|
|
|
139
139
|
```
|
|
140
140
|
|
|
141
141
|
> 画面キャプチャ
|
|
142
|
-
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
> 判定追記(既にある$('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');はコメントアウトしてから使う)
|
|
145
|
+
(例)お名前のエラーチェックの後にこの判定を追加
|
|
146
|
+
```javascript
|
|
147
|
+
//既にエラーが表示されていてチェックフォームが正常なら1emをマイナスする
|
|
148
|
+
if($('.js-is-error--text-input1').text() != ''){
|
|
149
|
+
if(checkform){
|
|
150
|
+
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
151
|
+
$('#js-height-adjustment').css('height', 'calc(heightGet + px - 1em)');
|
|
152
|
+
}
|
|
153
|
+
}else{
|
|
154
|
+
if(!checkform){
|
|
155
|
+
// 背景の縦幅を必須項目というテキスト分高くする。
|
|
156
|
+
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
157
|
+
$('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
|
|
158
|
+
}
|
|
159
|
+
}
|
|
160
|
+
```
|
3
キャプチャを追加
answer
CHANGED
|
@@ -136,4 +136,7 @@
|
|
|
136
136
|
return checkform;
|
|
137
137
|
});
|
|
138
138
|
});
|
|
139
|
-
```
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
> 画面キャプチャ
|
|
142
|
+
|
2
キャプチャを追加
answer
CHANGED
|
File without changes
|
1
追記
answer
CHANGED
|
@@ -56,4 +56,84 @@
|
|
|
56
56
|
</form>
|
|
57
57
|
</body>
|
|
58
58
|
</html>
|
|
59
|
+
```
|
|
60
|
+
|
|
61
|
+
> 追記(頂いたソースを加工したもの(javascript抜粋)
|
|
62
|
+
```javascript
|
|
63
|
+
//お問い合わせフォームチェック
|
|
64
|
+
$(function(){
|
|
65
|
+
$('#js-error-inquiry').submit(function(){
|
|
66
|
+
var checkform = true;
|
|
67
|
+
// 以下input一つ目
|
|
68
|
+
// inputタグ
|
|
69
|
+
if($('.js-is-input-error1').val() == ''){
|
|
70
|
+
// inputに文字が入っていなければ、必須項目と出るようにする。
|
|
71
|
+
// spanタグ
|
|
72
|
+
$('.js-is-error--text-input1').text('必須項目です').css({'color': 'red',
|
|
73
|
+
'text-shadow': '0px 0px 10px #fff,'+
|
|
74
|
+
'0px 0px 10px #fff,'+
|
|
75
|
+
'0px 0px 10px #fff,'+
|
|
76
|
+
'0px 0px 10px #fff,'+
|
|
77
|
+
'0px 0px 10px #fff,'+
|
|
78
|
+
'0px 0px 10px #fff,'+
|
|
79
|
+
'0px 0px 10px #fff,'+
|
|
80
|
+
'0px 0px 10px #fff,'+
|
|
81
|
+
'0px 0px 10px #fff,'+
|
|
82
|
+
'2px 2px 2px #fff'}); // +改行を可能にするために必要
|
|
83
|
+
// 背景の縦幅を必須項目というテキスト分高くする。
|
|
84
|
+
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
85
|
+
//$('#js-height-adjustment').css('height', 'calc(heightGet + px + 1em)');
|
|
86
|
+
checkform = false; // var省略
|
|
87
|
+
}else{
|
|
88
|
+
// inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
|
|
89
|
+
$('.js-is-error--text-input1').text(''); // spanタグ
|
|
90
|
+
}
|
|
91
|
+
// 以下input二つ目
|
|
92
|
+
// inputタグ
|
|
93
|
+
if($('.js-is-input-error2').val() == ''){
|
|
94
|
+
// inputに文字が入っていなければ、必須項目と出るようにする。
|
|
95
|
+
$('.js-is-error--text-input2').text('必須項目です').css({'color': 'red',
|
|
96
|
+
'text-shadow': '0px 0px 10px #fff,'+
|
|
97
|
+
'0px 0px 10px #fff,'+
|
|
98
|
+
'0px 0px 10px #fff,'+
|
|
99
|
+
'0px 0px 10px #fff,'+
|
|
100
|
+
'0px 0px 10px #fff,'+
|
|
101
|
+
'0px 0px 10px #fff,'+
|
|
102
|
+
'0px 0px 10px #fff,'+
|
|
103
|
+
'0px 0px 10px #fff,'+
|
|
104
|
+
'0px 0px 10px #fff,'+
|
|
105
|
+
'2px 2px 2px #fff'}); // +改行を可能にするために必要
|
|
106
|
+
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
107
|
+
//$('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
|
|
108
|
+
checkform = false; // var省略
|
|
109
|
+
}else{
|
|
110
|
+
// inputに文字が入っていれば、spanのテキストである、必須項目という文言が出ないようにする。
|
|
111
|
+
$('.js-is-error--text-input2').text(''); // spanタグ
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
// 以下textarea
|
|
115
|
+
if($('.js-is-error-body').val() == ''){
|
|
116
|
+
$('.js-is-error--text-texarea').text('必須項目です').text('必須項目です').css({'color': 'red',
|
|
117
|
+
'text-shadow': '0px 0px 10px #fff,'+
|
|
118
|
+
'0px 0px 10px #fff,'+
|
|
119
|
+
'0px 0px 10px #fff,'+
|
|
120
|
+
'0px 0px 10px #fff,'+
|
|
121
|
+
'0px 0px 10px #fff,'+
|
|
122
|
+
'0px 0px 10px #fff,'+
|
|
123
|
+
'0px 0px 10px #fff,'+
|
|
124
|
+
'0px 0px 10px #fff,'+
|
|
125
|
+
'0px 0px 10px #fff,'+
|
|
126
|
+
'2px 2px 2px #fff'}); // +改行を可能にするために必要
|
|
127
|
+
checkform = false;
|
|
128
|
+
}else{
|
|
129
|
+
$('.js-is-error--text-texarea').text(''); // spanタグ
|
|
130
|
+
}
|
|
131
|
+
// return checkform（変数 ）（テキストが入っている場合はture、入っていない場合はfalseが変数に入る。）
|
|
132
|
+
// return checkform;は変数の指定位置までもどる。checkform変数に戻ってくださいということ。
|
|
133
|
+
// return false;の場合は、送信ボタンが実行されないようにしている。
|
|
134
|
+
var heightGet = $('#js-height-adjustment').height(); // sectionタグ
|
|
135
|
+
//$('#js-height-adjustment').css('height', 'calc(' + heightGet + 'px + 1em)');
|
|
136
|
+
return checkform;
|
|
137
|
+
});
|
|
138
|
+
});
|
|
59
139
|
```
|