質問編集履歴
2
記述の一新、既存のオープンソースを使用
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
#
|
|
1
|
+
# 前提・実現したいこと
|
|
2
2
|
|
|
3
3
|
jQueryでアンケートページのエラー時の挙動を設定しています。
|
|
4
4
|
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
|
|
21
21
|
|
|
22
22
|
|
|
23
|
-
#
|
|
23
|
+
# 発生している問題・エラーメッセージ
|
|
24
24
|
|
|
25
25
|
|
|
26
26
|
|
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
|
|
31
31
|
|
|
32
32
|
|
|
33
|
-
#
|
|
33
|
+
# 該当のソースコード
|
|
34
34
|
|
|
35
35
|
```HTML
|
|
36
36
|
|
|
@@ -470,7 +470,7 @@
|
|
|
470
470
|
|
|
471
471
|
|
|
472
472
|
|
|
473
|
-
##
|
|
473
|
+
## 試したこと
|
|
474
474
|
|
|
475
475
|
- 以下の部分の修正・改善(var position)
|
|
476
476
|
|
|
@@ -498,7 +498,7 @@
|
|
|
498
498
|
|
|
499
499
|
|
|
500
500
|
|
|
501
|
-
##
|
|
501
|
+
## 補足情報（FW/ツールのバージョンなど）
|
|
502
502
|
|
|
503
503
|
|
|
504
504
|
|
|
@@ -506,8 +506,74 @@
|
|
|
506
506
|
|
|
507
507
|
|
|
508
508
|
|
|
509
|
-
##
|
|
509
|
+
## 【自力で解決できました】
|
|
510
510
|
|
|
511
511
|
jquery.validationEngine というアンケートやフォームなどで使える既存のものがあったのでそれを使用し、カスタマイズして使用しました。
|
|
512
512
|
|
|
513
|
-
委託の制作会社で制作したJSだったので独自すぎてカスタマイズが難しかったことから、全部やり直すことにしました。
|
|
513
|
+
委託の制作会社さんで制作したJSだったので独自すぎてカスタマイズが難しかったことから、全部やり直すことにしました。
|
|
514
|
+
|
|
515
|
+
解決方法は以下の通りです。
|
|
516
|
+
|
|
517
|
+
|
|
518
|
+
|
|
519
|
+
### 【自力で解決した方法】
|
|
520
|
+
|
|
521
|
+
以下のブログ記事を参考にさせていただき、<input>内の属性の中身を中心に記述しなおしました。
|
|
522
|
+
|
|
523
|
+
[参考サイト①：http://www.webdesign-fan.com/](http://www.webdesign-fan.com/jquery-validation-engine)
|
|
524
|
+
|
|
525
|
+
|
|
526
|
+
|
|
527
|
+
当初は、制作会社さんの制作したLPがCVボタンを<a>タグの中の<img>タグで設定していたため（HTMLコード参照）、そこも<input>タグに修正し、その画像はCSSの[background]で読み込むことにより解決しました。
|
|
528
|
+
|
|
529
|
+
|
|
530
|
+
|
|
531
|
+
|
|
532
|
+
|
|
533
|
+
|
|
534
|
+
|
|
535
|
+
### エラーが起きている要素の左上にエラー文を配置する
|
|
536
|
+
|
|
537
|
+
また、他にもエラー文を表記させる際の位置をカスタマイズしました。
|
|
538
|
+
|
|
539
|
+
[参考サイト②：https://studio-key.com/](https://studio-key.com/1139.html)
|
|
540
|
+
|
|
541
|
+
```HTML
|
|
542
|
+
|
|
543
|
+
<!-- <head>内記入タグ変更前 -->
|
|
544
|
+
|
|
545
|
+
<script>
|
|
546
|
+
|
|
547
|
+
$(function(){
|
|
548
|
+
|
|
549
|
+
jQuery("#form_1").validationEngine();
|
|
550
|
+
|
|
551
|
+
});
|
|
552
|
+
|
|
553
|
+
</script>
|
|
554
|
+
|
|
555
|
+
```
|
|
556
|
+
|
|
557
|
+
```HTML
|
|
558
|
+
|
|
559
|
+
<!-- <head>内記入タグ変更後*** -->
|
|
560
|
+
|
|
561
|
+
<script>
|
|
562
|
+
|
|
563
|
+
$(function(){
|
|
564
|
+
|
|
565
|
+
jQuery("#form_1").validationEngine('attach', {
|
|
566
|
+
|
|
567
|
+
promptPosition:"topLeft"
|
|
568
|
+
|
|
569
|
+
});
|
|
570
|
+
|
|
571
|
+
});
|
|
572
|
+
|
|
573
|
+
</script>
|
|
574
|
+
|
|
575
|
+
```
|
|
576
|
+
|
|
577
|
+
上記の様に<head>内に読み込む際、「topLeft」とすることで、エラーが起きている要素の左上に配置させることができました。
|
|
578
|
+
|
|
579
|
+
参考サイト②で、他の位置に指定する方法もご覧いただけます。
|
1
jsの根本的な改善
test
CHANGED
|
File without changes
|
test
CHANGED
|
@@ -503,3 +503,11 @@
|
|
|
503
503
|
|
|
504
504
|
|
|
505
505
|
使用ソフト Atom、Google Chrome
|
|
506
|
+
|
|
507
|
+
|
|
508
|
+
|
|
509
|
+
### 【自力で解決できました】
|
|
510
|
+
|
|
511
|
+
jquery.validationEngine というアンケートやフォームなどで使える既存のものがあったのでそれを使用し、カスタマイズして使用しました。
|
|
512
|
+
|
|
513
|
+
委託の制作会社で制作したJSだったので独自すぎてカスタマイズが難しかったことから、全部やり直すことにしました。
|