こんにちは、現在フリーのweb制作者として活動しているしょーご（@samuraibrass）といいます。
みなさん、フォームを制作するときバリデーションはかけてますでしょうか？
入力してない箇所をコメントで示したり、入力しなければ、送信できないようにしたり、です。
特にWordPressでなく静的サイトにフォームを埋め込む場合は、JavaScriptやjQueryで制御することが多いかと思います。
最低限、フォームやプライバシーポリシーに同意しなければ、送信できないようにしておくのは、誤送信防止やスパムチェックのためにやっておきたいところ。
jQuery利用でフォームの入力欄＆プライバシーポリシーに同意が埋まるまでsubmitボタンが押せないようにすることができるようになる
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
コーディングを学習中の方はぜひご活用ください。
＼無料の入門編から本格企業サイトまで／
フォームの完成形
前提事項
この記事のフォームはGoogleフォームとの紐付けを行っている前提なので、nameやactionにGoogleフォームと同様の情報を載せています。
各々自分で作成したGoogleフォームのnameやaction URLを該当部分に書いてください。
フォームのソースコード解説
まずはhtmlとcss
<body>
<div class="form-wrapper">
<form
action="https://docs.google.com/forms/u/0/d/e/hoge-/formResponse"
id="form">
<div class="box">
<label for="name">お名前</label>
<input type="text" name="entry.396xxxxx" id="name" placeholder="お名前" required>
</div>
<div class="box">
<label for="mail">メールアドレス</label>
<input type="mail" name="entry.1934xxxxx" id="mail" placeholder="メールアドレス" required>
</div>
<div class="box">
<p class="box">お好きなプログラミング言語</p>
<div class="flex-box"><input type="radio" name="entry.1977xxxx" required value="scala">
<p>scala</p>
</div>
<div class="flex-box"><input type="radio" name="entry.197xxxxxx" required value="kotlin">
<p>kotlin</p>
</div>
<div class="flex-box"><input type="radio" name="entry.19776xxxx" required value="basic">
<p>basic</p>
</div>
</div>
<div class="box">
<textarea name="entry.181xxxxx" id="" cols="30" rows="10" placeholder="自由記述"></textarea><!-- /# -->
</div>
<div class="box">
<label for="privacyCheck">プライバシーポリシーに同意します</label>
<input type="checkbox" id="privacyCheck" required>
</div>
<input type="submit" id="js-submit" disabled>
</form>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="script.js"></script>
</body>.form-wrapper {
width: 500px;
margin-left: auto;
margin-right: auto;
}
.flex-box {
display: flex;
align-items: center;
}ここで重要なのはformのidの部分と、inputのtypeで使用しているtype、プライバシーポリシーのid、submitボタンのidぐらいです。あとはGoogleフォームとの紐付けやcssのクラスなどを当てているので、今回のsubmitボタン操作には直接的には関係ないです。
それとjQueryを読み込んでおいてください。
次にjQuery。
$(document).ready(function () {
const $submitBtn = $('#js-submit')
$('#form input,#form textarea').on('change', function () {
if (
$('#form input[type="text"]').val() !== "" &&
$('#form input[type="email"]').val() !== "" &&
$('#form input[type="checkbox"]').val() !== "" &&
$('#form #privacyCheck').prop('checked') === true
) {
$submitBtn.prop('disabled', false);
} else {
$submitBtn.prop('disabled', true);
}
});
});ここのjQueryコードを解説していきます。
フォームinputに値が入っているか確認する
const $submitBtn = $('#js-submit')まずは定数submitBtnを定義します。submitボタンのidを指定します。
$('#form input,#form textarea').on('change', function () {
if (
$('#form input[type="text"]').val() !== "" &&
$('#form input[type="email"]').val() !== "" &&
$('#form input[type="checkbox"]').val() !== "" &&
$('#form #privacyCheck').prop('checked') === true
) ここのif文定義は、まず
- changeイベントでinput,textareaに変更があるたびに発火
- if文内で各inputに対して空じゃないかチェック
- 最後はprivacyCheck（プライバシーポリシーの部分）にcheckedがついているか確認
inputに値が入っているか確認したらdisabledを操作
{
$submitBtn.prop('disabled', false);
} else {
$submitBtn.prop('disabled', true);
}- 上記が満たされるのであれば、submitBtnからdisabledを外し、
- 空欄が存在するのであれば、disabledはfalseとなる
Googleフォームとの連携はこちら
HTML初心者からWordPress実案件レベルまでのコーディング演習課題をnoteで公開しています。
- デザインカンプからのコーディング
- プロによる2回の表示確認特典
- ポートフォリオとして使用OK
初級編は初めてデザインからコーディングする方向け、中級編はJavaScriptやjQueryの練習、上級編はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
自分が「これを実案件までに学習しておくと良いな」と感じたポイントを詰め込んだ教材になります！
基本的にまとめて購入していただくとかなりお得になります。
コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください！！
＼課題の購入はこちらから／
＼課題の詳細はこちらから／
