Q&A
webフォームを作っています。
作成したいフォームは、
必須項目の入力がない場合はサーバーへは送信せずエラーを表示し、
検証をたす場合のみサーバーへ送信する（次ページに行く）仕組みです。
何も入力せずに送信ボタンをクリックすると、
必須入力を指定していない場合「必須です」というエラーが表示されます。
以下のコードは、「JavaScriptを使った基本的なフォームの検証」というページを参考に作ったものです。
名前の項目を必須項目にし、sumbitボタンで入力チェックする動作は実現できました。
それに加え、「ボタンクリック動作」を必須項目にしたいと考えております。
具体的には、
「見積り」ボタンを押している → 次のページに飛ぶ
「見積り」ボタンを押していない → サーバーに送信する前に「(クリック)必須です」というエラーを表示させる。
という具合です。
============＜修正点＞=================
１. フラグを用意する
phpの47行目
<input class="push" type="hidden" name="swich" value=""></input>
のname=swichのvalueをフラグにすることにした。
・valueが空白なら → サーバー送信する前にエラー文字を表示
２. [見積り]のボタンを押すと、value="on"の追加
見積りボタンを押すとjavascriptの36行目からの操作で
<input class="push" type="hidden" name="swich" value=""></input>
が追加される。
３. 内容確認ボタンを押すが追加したフラグが反映されない。
内容確認（フォーム送信submit）ボタンを押してもname="swich"のvalueが更新されず空白のままです。
==================================
↑↑ 3. の内容確認ボタンを押したときにname="swich"のvalueが変わってほしいです。
お詳しい方にアドバイスを頂きたく投稿させていただきました。
よろしくお願いいたします。
該当のソースコード
php
1<?php 2var_dump($_POST); 3 4// 変数の初期化 5$page_flag = 0; 6 7if ( !empty($_POST['registration']) ) { 8 $page_flag = 1; 9} else { 10 $page_flag = 2; 11} 12 13 echo $page_flag; 14?> 15 16<?php if( $page_flag === 1 ): ?> 17 18<!DOCTYOE html> 19<html lang="ja"> 20<head> 21 <meta charset=shift_jis"> 22 <title>フォームテスト</title> 23</head> 24 25<body> 26 <p>内容確認</p> 27 <p>\10,000</p> 28 <p>これでいいですか？？</p> 29</body> 30 31<?php else: ?> 32 33 34<!DOCTYOE html> 35<html lang="ja"> 36<head> 37 <meta charset=shift_jis"> 38 <title>フォームテスト</title> 39 <script type="text/javascript" src="modules/js/jquery.min.js"></script> 40 <script type="text/javascript" src="jsfile/test2.js"></script> 41 <link rel="stylesheet" href="css/test.css"> 42 43</head> 44 45<body> 46 <form name="myForm" class="btn_push" method="post" action="" novalidate> 47 <input class="push" type="hidden" name="swich" value=""></input> 48 <input type="button" value="見積り"> 49 <div id="swich"></div> 50 <div id="output_message"></div> 51 <button name="registration" value="内容確認">内容確認</button> 52 <button onClick="JavaScript:history.back()">もどる</button> 53 </form> 54</body> 55 56<?php endif; ?>
javascript
1document.addEventListener('DOMContentLoaded', () => { 2 const btn_push = document.querySelector('.btn_push'); 3 if(btn_push) { 4 const errorClassName = 'error'; 5 const pushElems = document.querySelectorAll('.push'); 6 7 const createError = (elem, errorMessage) => { 8 const errorSpan = document.createElement('span'); 9 errorSpan.classList.add(errorClassName); 10 errorSpan.setAttribute('aria-live', 'polite'); 11 errorSpan.textContent = errorMessage; 12 elem.parentNode.appendChild(errorSpan); 13 } 14 console.log(pushElems); 15 16 btn_push.addEventListener('submit', (e) => { 17 const errorElems = btn_push.querySelectorAll('.' + errorClassName); 18 console.log(errorElems); 19 console.log(pushElems); 20 21 errorElems.forEach( (elem) => { 22 elem.remove(); 23 }); 24 pushElems.forEach( (elem) => { 25 console.log(elem); 26 const elemValue = elem.value.trim(); 27 if(elemValue.length === 0) { 28 createError(elem, '必須です'); 29 e.preventDefault(); 30 } 31 }); 32 }); 33 } 34}); 35 36$(document).ready(function () { 37 $("input:button").click(function(){ 38 swich = "<input class=\"push\" type=\"text\" name=\"swich\" value=\"on\"></input>"; 39 input_message = "見積りしました。<br> \\10,000<br>になります"; 40 document.getElementById("output_message").innerHTML = input_message; 41 document.getElementById("swich").innerHTML = swich; 42 }); 43});
css
1.error { 2 width : 100%; 3 padding: 0; 4 display: inline-block; 5 font-size: 90%; 6 color: red; 7 box-sizing: border-box; 8}
回答1件
0
ベストアンサー
結局はフラグのON/OFFなので、hiddenに持つか、いっそJavaScriptのグローバル空間にフラグ変数持っておいて、
見積もりボタンが押されたときにON/OFF切り替えを行い、入力チェック時にそのフラグの値によって処理分岐をさせれば良いと思います。
フラグについては何でも良くて、
例えば先のhiddenや変数以外にもボタン自体に特定のclassを付与するとか、data属性を使うとか、色々考えられます。
そのほうがボタンそのものの挙動に終始できるのでやりやすくはなるかもしれません。
投稿2023/05/19 05:47
編集2023/05/19 05:53
総合スコア80695
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
また依頼した内容が修正された場合は、修正依頼を取り消すようにしましょう。
2023/05/26 08:12
2023/05/27 04:32
2023/05/30 00:39