コンタクトフォームで入力しなければ、送信できないようにしたい。

実現したいこと

コンタクトフォームの送信ボタンにdisabledをかけ未入力ではボタンを非活性にし、
入力が完了すれば送信できるようにしたい。

ボタンのidとjQueryのid名が一致しているかも確認済です。

HTMLを見るとdisabledの部分が消えたりついたりしておらず、jQueryが動いていません。

前提

エラーが出ています。

エラー内容↓
navigator.userAgent、navigator.appVersion、および navigator.platform の使用状況を監査する

SameSite 属性を指定して、クロスサイトリクエストで Cookie を送信するかどうかを指定します。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

HTML
1
2                    <form
3                        action="https://docs.google.com/forms/u/0/d/e/1FAIpQLSc68CwcBH9_LMtwaIP1D5I9EpSL1wGJ4mcNXl8ai9JPjEJAdA/formResponse"
4                        target="_self" method="POST" id="mG61Hd" jsmodel="TOfxwf Q91hve CEkLOc"
5                        data-shuffle-seed="8911685883490239039" data-response="%.@.[]]"
6                        data-dlp-data="%.@.null,false,[]]" data-first-entry="0" data-last-entry="7"
7                        data-is-first-page="true">
8                        <p class="form_ttl">お問い合わせメールフォーム</p><!-- /.form_txt -->
9
10                        <div class="contact__container ">
11                            <div class="input-field">
12                                <label class=" input-label">お問い合わせ種類
13                                    <span class="require" aria-hidd37-en="true">必須</span><!-- /.require -->
14                                </label><!-- /.contact__ttl -->
15                                <div class="radio-wrap">
16                                    <div class="radio-wrap_item">
17                                        <input type="radio" id="company" class="radio" name="entry.305880971" checked
18                                            value="弊社製品について">
19                                        <label for="company">弊社製品について</label>
20                                    </div><!-- /.radio-wrap_item -->
21                                    <div class="radio-wrap_item">
22                                        <input type="radio" id="strawberries" class="radio" name="entry.305880971"
23                                            value="いちご狩りについて">
24                                        <label for="strawberries">いちご狩りについて</label>
25                                    </div><!-- /.radio-wrap_item -->
26                                    <div class="radio-wrap_item">
27                                        <input type="radio" id="ohter" class="radio" name="entry.305880971"
28                                            value="その他のお問い合わせ">
29                                        <label for="ohter">その他のお問い合わせ</label>
30                                    </div><!-- /.radio-wrap_item -->
31                                </div><!-- /.radio-wrap -->
32                            </div><!-- /.input-field -->
33
34                        </div><!-- /.contact__container -->
35
36                        <div class="contact__container">
37                            <div class="input-field">
38                                <label for="contact__name" class="input-label">お名前
39                                    <span class="require" aria-hidden="true">必須</span><!-- /.require -->
40                                </label><!-- /.contact__name -->
41                                <input type="text" id="contact__name" name="entry.691037678" required>
42                            </div><!-- /.input-feild -->
43                            <p class="error-text" role="alert" aria-live="polite" aria-hidden="true">お名前を入力してください。</p>
44                            <!-- /.error-text -->
45                        </div><!-- /.contact__container -->
46
47                        <div class="contact__container">
48                            <div class="input-field">
49                                <label for="contact__post-code" class="input-label">郵便番号</label>
50                                <input type="text" id="contact__post-code" name="entry.843362794" inputmode="numeric">
51                            </div><!-- /.input-field -->
52                        </div><!-- /.contact__container -->
53
54                        <div class="contact__container">
55                            <div class="input-field">
56                                <label for="contact__address" class="input-label">ご住所
57                                    <span class="require" aria-hidden="true">必須</span><!-- /.require -->
58                                </label>
59                                <input type="text" id="contact__address" name="entry.672554844" required>
60                            </div><!-- /.input-field -->
61                            <p class="error-text" role="alert" aria-live="polite" aria-hidden="true">ご住所を入力してください。
62                            </p><!-- /.error-text -->
63                        </div><!-- /.contact__container -->
64
65                        <div class="contact__container">
66                            <div class="input-field">
67                                <label for="contact__email" class="input-label">メールアドレス
68                                    <span class="require" aria-hidden="true">必須</span><!-- /.require -->
69                                </label>
70                                <input type="email" id="contact__email" name="entry.1375337957" required>
71                            </div><!-- /.input-field -->
72                            <p class="error-text" role="alert" aria-live="polite" aria-hidden="true">
73                                正しい形式のメールアドレスを入力してください。</p><!-- /.error-text -->
74                        </div><!-- /.contact__container -->
75
76                        <div class="contact__container">
77                            <div class="input-field">
78                                <label for="contact__tel" class="input-label">電話番号
79                                    <span class="require" aria-hidden="true">必須</span><!-- /.require -->
80                                </label>
81                                <input type="tel" id="contact__tel" name="entry.1445859162" required>
82                            </div><!-- /.input-field -->
83                            <p class="error-text" role="alert" aria-live="polite" aria-hidden="true">電話番号を入力してください。
84                            </p><!-- /.error-text -->
85                        </div><!-- /.contact__container -->
86
87                        <div class="contact__container">
88                            <div class="input-field">
89                                <label for="contact__msg" class="input-label">お問い合わせ内容
90                                    <span class="require" aria-hidden="true">必須</span><!-- /.require -->
91                                </label>
92                                <textarea id="contact__msg" name="entry.2136629426" cols="30" rows="10"
93                                    required></textarea>
94                            </div><!-- /.input-field -->
95                            <p class="error-text" role="alert" aria-live="polite" aria-hidden="true">
96                                お問い合わせ内容を入力してください。
97                            </p><!-- /.error-text -->
98                        </div><!-- /.contact__container -->
99
100                        <p class="end-message">お問い合わせありがとうございました</p>
101                        <p class="false-message">送信失敗です</p>
102
103                        <div class="btn-center">
104                            <button id="submit" class="btn btn--action" disabled>送信する</button>
105                        </div>
106                    </form>
107

jQuery
1$(function () {
2 
3
4
5  
6    const $submitBtn = $('#submit')
7    $('#form input,#form textarea').on('change', function () {
8        if (
9            $('#form input[type="text"]').val() !== "" &&
10            $('#form input[type="email"]').val() !== "" &&
11            $('#form input[type="tel"]').val() !== ""
12        ) {
13            $submitBtn.prop('disabled', false);
14
15        } else {
16            $submitBtn.prop('disabled', true);
17        }
18    });
19});

scss
1@use "../global" as *;
2
3/* contact
4------------------------------------------------------ */
5
6
7.contact .blank {
8    display: block;
9}
10
11.contact_txt {
12    font-size: clamp(14px, 2.8vw, 18px);
13    font-weight: bold;
14    margin: 47px 0 47px;
15}
16
17form {
18    background: #fff;
19    border-radius: 28px;
20    padding: 37px 30px 43px;
21
22}
23
24
25.form_ttl {
26    font-weight: 700;
27    font-size: 18px;
28    margin-bottom: 44px;
29}
30
31.contact__container {
32    margin: 40px 0;
33    text-align: left;
34}
35
36.input-field {
37    display: flex;
38    flex-direction: column;
39
40
41    label {
42        display: block;
43        flex: 1;
44        text-align: left;
45        cursor: pointer;
46    }
47
48    label:not(.radio-wrap_item label) {
49        font-weight: 700;
50    }
51
52    .radio-wrap,
53    input[type=text],
54    input[type=email],
55    input[type=tel],
56    textarea {
57        display: block;
58        width: 100%;
59        margin-top: 15px;
60        cursor: pointer;
61    }
62
63    input[type=text],
64    input[type=email],
65    input[type=tel],
66    textarea {
67        background: #EFEAE6;
68        border: 1px solid transparent;
69        font-size: 16px;
70        padding: 6px 10px;
71        border-radius: 10px;
72    }
73
74    textarea {
75        resize: none;
76    }
77}
78
79
80
81//必須ラベル
82.require {
83    padding: 5px 11px;
84    background: $c_btn;
85    border-radius: 10px;
86    flex-shrink: 0;
87    font-size: 14px;
88    font-weight: 700;
89    margin-left: 18px;
90}
91
92
93
94
95.btn--action {
96    display: block;
97
98}
99
100#submit:disabled {
101    background: linear-gradient(90deg, #808080, #808080);
102    color: #fff;
103}
104

試したこと

https://shogo-log.com/submit-disabled/
上記サイトを参考にし、ボタンのHTMLにdisabledを記入し、jQueryで未記入ならdisabledをfalseにすると指示をした。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

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

回答1件

ベストアンサー

念のためコピペで動くソース

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $(document).on('input',function(){
5    var flg1=$('[required]:is([type=text],[type=tel],[type=email],textarea)').is(function(){return $(this).val()=="";});
6    var flg2=!$(':radio[required]:checked').val();
7    $('#submit').prop('disabled',flg1 || flg2);
8  });
9});
10</script>
11<ul class="portfolio-type-list portfolio-type-1">
12</ul>
13<form>
14<label><input type="radio" name="entry.305880971" value="弊社製品について" required>弊社製品について</label>
15<label><input type="radio" name="entry.305880971" value="いちご狩りについて" required>いちご狩りについて</label>
16<label><input type="radio" name="entry.305880971" value="その他のお問い合わせ" required>その他のお問い合わせ</label><br>
17<label>お名前<input type="text" name="entry.691037678" required></label><br>
18<label>ご住所<input type="text" name="entry.672554844" required></label><br>
19<label>メールアドレス<input type="text" name="entry.1375337957" required></label><br>
20<label>電話番号<input type="tel" name="entry.1445859162" required></label><br>
21<label>お問い合わせ内容<br>
22<textarea id="contact__msg" name="entry.2136629426" cols="30" rows="10" required></textarea>
23<hr>
24<button id="submit"disabled>送信する</button>
25</form>

投稿2023/05/10 03:05

編集2023/05/10 03:46

yambejp

総合スコア117674

spn

2023/05/10 06:49

コメントありがとうございます。これでも動かないようです。

yambejp

2023/05/10 09:09

＞これでも動かない本当に動かないですか？ https://codepen.io/yambejp/pen/qBJoeQd 想定する動作環境は？OSやブラウザの種類やバージョンは？

spn

2023/05/11 03:41

失礼しました。codepenで動いていること確認いたしました。私のｊQueryを消してyambejpさんのｊQueryをコピペして動作を確認してみたのですが変わらなかったです。HTMLが違うのでしょうか。。。次に組み合わせて書いてみるのはどうだろうと下記を記入したのですが、それでも動かなかったです。 const $submitBtn = $('#submit') $('#form input,#form textarea').on('change', function () { if ( $('#form input[required]:is([type="text"])').val() !== "" && $('#form input[required]:is([type="email"])').val() !== "" && $('#form input[required]:is([type="tel"])').val() !== "" ) { $submitBtn.prop('disabled', false); } else { $submitBtn.prop('disabled', true); } });

yambejp

2023/05/11 03:47

逆にspnさんのソースをcodepen（もしくはその他ソースが実行できるサイト）にアップできませんか？

spn

2023/05/12 07:59

返信遅くなってしまい申し訳ありません。こちらです。ご確認宜しくお願い致します。 https://codepen.io/zwntazrx-the-builder/pen/YzJvpzW

yambejp

2023/05/12 08:13

私のソースと違うところはラジオボタンにrequiredをつけていないところです。つけて再チャレンジしてみてください

spn

2023/05/12 12:10

初歩的なミスに気づかず失礼いたしました。 yambejpさんのお陰で無事解決いたしました。適切な受け答えありがとうございました。