必須項目入力後に送信ボタン表示

前提・実現したいこと

PHP,jQueryを使用してお問い合わせフォームを作成しています。
必須項目を全て入力後に送信ボタンの表示が変わり送信可能になるようにしたいのですが、1つのチェック項目に反応して送信ボタンの表示が切り替わってしまいます。

該当のソースコード

php
1<?
2session_start();
3
4$args = $_SESSION['sendmail_content']['args'];
5$errors = $_SESSION['errors'];
6?>
7
8<!DOCTYPE html>
9<html>
10<head>
11
12<style>
13span.items{display: block; clear: both;}
14.items > input[type=checkbox]:checked + span > label > .wpcf7-list-item-label:before {opacity:1; }
15.items > input[type=checkbox] ~ .plans {display: none;}
16.items > input[type=checkbox]:checked ~ .plans {display: block;}
17#send-message {display: block; text-align: center; color: #f00;}
18#send:not([disabled]) ~ #send-message {display: none;}
19#send[disabled] ~ #send-button {
20    background-color: #ccc;
21    color: #333;
22    pointer-events: none;
23}
24.grecaptcha-badge {
25    bottom: 74px !important;
26    z-index: 1000;
27}
28</style>
29
30</head>
31
32
33ーーーーーーーーーーーーーーーーーーーーー中略ーーーーーーーーーーーーーーーーーーーーー
34
35
36<article>
37<section class="cta  contact cf">
38	<div class="inner">
39		<div class="title sa sa-up"><h2>お問い合わせ<span>CONTACT</span></h2></div>
40	<div class="cta-box">
41	<form action="./send.php" method="post" class="contact-form">
42		<input type="hidden" name="entryPlan" value="お問い合わせ">
43		<div style="display: none;"></div>
44
45
46ーーーーーーーーーーーーーーーーーーーーー中略ーーーーーーーーーーーーーーーーーーーーー
47
48
49	<dl>
50	<dt>会社名<span class="hissu">必須</span></dt>
51	<dd><input type="text" name="company" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="例）株式会社○○○○" required></dd>
52	</dl>
53	<dl>
54	<dt>氏名<span class="hissu">必須</span></dt>
55	<dd>
56		<input type="text" name="fname" value="" style="width: 49%;" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="Family name" required>
57		<input type="text" name="lname" value="" style="width: 49%;" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder="First name" required>
58	</dd>
59	</dl>
60	<dl>
61	<dt>メールアドレス<span class="hissu">必須</span></dt>
62	<dd><input type="text" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" aria-invalid="false" placeholder="info@○○○○.com" required></dd>
63	</dl>
64	<dl>
65	<dt>電話番号<span class="hissu">必須</span></dt>
66	<dd><span class="wpcf7-form-control-wrap your-tel"><input type="tel" name="tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" placeholder="090○○○○○○○○" required></span></dd>
67	</dl>
68	<dl>
69	<dt>備考<span class="nini">任意</span></dt>
70	<dd><span class="wpcf7-form-control-wrap your-tel"><textarea name="textarea" cols="40" rows="10" class="wpcf7-form-control wpcf7-textarea wpcf7-validates-as-required" aria-required="true" aria-invalid="false" placeholder=""></textarea></dd>
71	</dl>
72
73
74ーーーーーーーーーーーーーーーーーーーーー中略ーーーーーーーーーーーーーーーーーーーーー
75
76
77<dl class="last-dl">
78		<dt>個人情報<span class="hissu">必須</span></dt>
79		<dd>
80			<span class="wpcf7-form-control-wrap checkbox">
81				<span style="display: <?= $args["privacy"] ? "none" : "block" ?>;" class="privacy-leadarea"><a data-remodal-target="privacy-remodal" href="javascript:void(0);" style="color:#f00; text-decoration:underline;">個人情報の取り扱いについて確認</a>する。</span>
82				<span style="display: <?= $args["privacy"] ? "none" : "block" ?>;" class="privacy-leadarea">※個人情報の取り扱いについてのご確認は必須です。</span>
83				<span style="margin-top: 20px; display: <?= $args["privacy"] ? "block" : "none"; ?>" class="wpcf7-form-control wpcf7-checkbox wpcf7-validates-as-required privacy-checkarea">
84					<span class="wpcf7-list-item first">
85						<label>
86							<input type="checkbox" name="privacy" value="1"<? if($args["privacy"]) { echo " checked"; } ?>>
87							<span class="wpcf7-list-item-label" style="white-space:nowrap;"><a data-remodal-target="privacy-remodal" href="javascript:void(0);">個人情報の取り扱いについて</a>同意する</span>
88					</label>
89					</span>
90				</span>
91			</span>
92		</dd>
93		</dl>
94		<p>
95		<input id="send" type="submit" value="送信" class="hidden wpcf7-form-control wpcf7-submit" style="display:none;" disabled="disabled">
96		<button id="send-button" class="g-recaptcha wpcf7-form-control wpcf7-submit" data-sitekey="6Le4maYZAAAAAAV-xHnXEuSZpKuiJpaeGFBcF-6o" data-callback="onSubmit" data-action="submit">送信<span class="ajax-loader"></span></button>
97		<span id="send-message">必須項目を全て入力するとボタンが押せます。</span>
98		</p>
99	</form>
100　　</div>
101　</div>	
102</section>
103
104ーーーーーーーーーーーーーーーーーーーーー中略ーーーーーーーーーーーーーーーーーーーーー
105
106
107<script>
108
109$('.privacy').on('scroll', function(){
110		var innerHeight = $('.privacy-inner').innerHeight();
111		var outerHeight = $('.privacy').innerHeight();
112		var outerBottom = innerHeight - outerHeight - 40; // padding
113
114		if (outerBottom <= $('.privacy').scrollTop()) {
115				$('.privacy-submit').prop('disabled', false);
116		}
117});
118$('.privacy-submit').click(function() {
119		$('.privacy-leadarea').hide();
120		$('.privacy-checkarea').show();
121		$('input[name="privacy"]').prop('checked', true);
122		$('input[name="privacy"]').trigger('change');
123
124		$('.privacy-close').trigger('click');
125});
126$('input[name="privacy"]').change(function() {
127	checkAgreement();
128});
129
130function checkAgreement() {
131	var agreement = $('input[name="privacy"]').prop('checked'); 
132	$('#send').prop('disabled', !agreement);
133}
134$('form input').change(function() {
135    checkValidation();
136});
137function checkValidation() {
138    var form = $('form').serializeArray();
139    var formData = [];
140    for (var i in form) {
141        formData[form[i]["name"]] = form[i]["value"];
142    }
143    $('#send').removeClass("disabled");
144    $('form input[required]').each(function() {
145        if (!formData[$(this).attr('name')]) {
146            $('#send').addClass("disabled");
147        }
148    });
149}
150checkValidation();
151</script>
152<script src="https://player.vimeo.com/api/player.js"></script>
153<script>
154$(function() {
155    $('.btnBlue').click(function() {
156        var iframe = document.querySelector($(this).data('player'));
157        var player = new Vimeo.Player(iframe);
158
159        $(this).parents('ul').find('.btnBlue').removeClass('active');
160        $(this).addClass('active');
161
162        player.setPlaybackRate($(this).data('speed'));
163    });
164});
165</script>
166<script src="https://www.google.com/recaptcha/api.js"></script>
167<script>
168function onSubmit(token) {
169    $("#form").find("input[type=submit]").click();
170}
171</script>
172</html>
173
174

補足

現状、個人情報のチェックを入力すると、送信ボタンが表示切り替わってしまいます。
恐らく、jQueryのrequired属性の記述方法が間違っているのだと思います。

どうぞよろしくお願いします。

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

回答1件

ベストアンサー

テキストボックスだけでよければこんな感じ

javascript
1<script>
2$(function(){
3  $(':required').on('input',function(){
4    var flg=$(':required').filter(function(){return $(this).val()==""}).length>0;
5    $(':submit').prop('disabled',flg).toggle(!flg);
6  });
7});
8</script>
9<form>
10任意：<input type="text" name="a"><br>
11必須：<input type="text" name="b" required><br>
12必須：<input type="text" name="c" required><br>
13<input type="submit" disabled style="display:none"><br>
14</form>

投稿2020/12/25 02:16

yambejp

総合スコア116724

Satochika

2020/12/25 02:50

ご回答頂きありがとうございます。 inputタグのdisabled属性は、disabled="disabled"でもよろしいでしょうか？また、jQueryの記述で消した方が良い記述はありますか？こちらを追加しただけでは変わらず、どの記述がデバックを起こしているのかがわかりません。よろしくお願いします。

yambejp

2020/12/25 02:55

厳密に言えばsubmitのdisabledはいらないっちゃいらないです。チェックボックスをrequiredにする場合は:checkedのチェックが必要です。 formの送信要素に何があって、どこが必須項目なのか仕様を明示したほうがよいでしょう

Satochika

2020/12/25 03:14

ご回答頂きありがとうございます。チェックボックス及び必須入力フォームをrequiredにしておりhead内に、 span.items{display: block; clear: both;} .items > input[type=checkbox]:checked + span > label > .wpcf7-list-item-label:before {opacity:1; } .items > input[type=checkbox] ~ .plans {display: none;} .items > input[type=checkbox]:checked ~ .plans {display: block;} という:checkedのチェックを記述しています。ですが、これでは必須項目のバリデーションになっていません。 formの送信要素には、会社名、名前、メール、電話番号、備考、個人情報があり、備考以外が必須項目となります。どうぞよろしくお願いします。

yambejp

2020/12/25 03:47

チェックボックス入り <script> $(function(){ $(':required').on('input',function(){ var flg=$(':required').filter(function(){ return false || $(this).is(':text') && $(this).val()=="" || $(this).is(':checkbox') && !$(this).prop('checked'); }).length>0; $(':submit').prop('disabled',flg).toggle(!flg); }).trigger('input'); }); </script> <form> 任意：<input type="text" name="a"><br> 必須：<input type="text" name="b" required><br> 必須：<input type="text" name="c" required><br> <label>任意：<input type="checkbox" name="d"></label><br> <label>必須：<input type="checkbox" name="e" required></label><br> <label>必須：<input type="checkbox" name="e" required></label><br> <input type="submit" disabled style="display:none"><br> </form>

Satochika

2020/12/25 05:52

ご回答頂きありがとうございます。フォームの方はおおよそ同じなのですが、jQueryの方がどう対応して良いのかがわかりません。 function checkAgreement() { var agreement = $('input[name="privacy"]').prop('checked'); $('#send').prop('disabled', !agreement); } $('form input').change(function() { checkValidation(); }); function checkValidation() { var form = $('form').serializeArray(); var formData = []; for (var i in form) { formData[form[i]["name"]] = form[i]["value"]; } $('#send').removeClass("disabled"); $('form input[required]').each(function() { if (!formData[$(this).attr('name')]) { $('#send').addClass("disabled"); } }); } checkValidation(); の代わりに、 $(function(){ $(':required').on('input',function(){ var flg=$(':required').filter(function(){ return false || $(this).is(':text') && $(this).val()=="" || $(this).is(':checkbox') && !$(this).prop('checked'); }).length>0; $(':submit').prop('disabled',flg).toggle(!flg); }).trigger('input'); }); とそのまま記述しても上手くいきません。フォームで使っているtypeはtext,tel,checkboxなのですが、どこをどう対応して良いのかわかりません。よろしくお願いします。

yambejp

2020/12/25 05:56

どれが必須項目なのかわかるような説明をつけて最小限のHTMLを提示ください

Satochika

2020/12/25 06:04

ご回答頂きありがとうございます。必要項目のHTMLは、【会社名】 <input type="text" name="company" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" required> 【氏名】 <input type="text" name="fname" value="" style="width: 49%;" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" required> 【メール】 <input type="text" name="email" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" aria-invalid="false" required> 【電話番号】 <input type="tel" name="tel" value="" size="40" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" required> 【個人情報】 <input type="checkbox" name="privacy" value="1"<? if($args["privacy"]) { echo " checked"; } ?>> となっております。よろしくお願いします。

yambejp

2020/12/25 06:21 編集

質問内容がブレるのでPHPの部分を排除してHTMLでかいてくださいまたそもそもsubmitが見当たりませんが、命題はsubmitの表示非表示を調整したいのではないのですか？

Satochika

2020/12/25 06:28

ご回答頂きありがとうございます。仰る通りsubmitの表示非表示を調整したいです。必須項目のみ記載していたため、送信のフォームが消えていました。改めて記述させて頂きます。【会社名】 <input type="text" name="company" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" required> 【氏名】 <input type="text" name="fname" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" required> 【メール】 <input type="text" name="email" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" aria-invalid="false" required> 【電話番号】 <input type="tel" name="tel" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" required> 【個人情報】 <input type="checkbox" name="privacy" value="1"> 【送信フォーム】 <input id="send" type="submit" value="送信" class="hidden wpcf7-form-control wpcf7-submit" style="display:none;" disabled="disabled"> となっております。よろしくお願いします。

yambejp

2020/12/25 06:50

type=telが混ざっているからでは？そもそもtype=telは国によって基準が異なるためなにもしてくれません type=textにした方がよいでしょう。また件のcheckboxにrequiredがついてないので、前提がずれています

Satochika

2020/12/25 07:05

ご回答頂きありがとうございます。【会社名】 <input type="text" name="company" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" required> 【氏名】 <input type="text" name="fname" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" aria-required="true" aria-invalid="false" required> 【メール】 <input type="text" name="email" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-email" aria-invalid="false" required> 【電話番号】 <input type="text" name="tel" class="wpcf7-form-control wpcf7-text wpcf7-tel wpcf7-validates-as-tel" aria-invalid="false" required> 【個人情報】 <input type="checkbox" name="privacy" value="1" required> 【送信フォーム】 <input id="send" type="submit" value="送信" class="hidden wpcf7-form-control wpcf7-submit" style="display:none;" disabled="disabled"> とtel→text、checkboxにrequiredを追加してみましたが変わりません。個人情報のcheckboxにチェックを入れるだけで表示が切り替わってしまいます。 jQueryの記述はHTMLの記述とどう対応してくるのでしょうか。どうぞよろしくお願いします。

yambejp

2020/12/25 07:14

codepenにsample上げときました https://codepen.io/yambejp/pen/OJRORVB classが色々していしてあるので、なにか悪さしているのかもしれませんね

Satochika

2020/12/25 08:30

ありがとうございます。そうですね、classを全部消したら1つの項目で表示が切り替わるということがなくなったので、もしかするとjQueryの問題ではないのかもしれません。

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