実現したいこと
webフォームを作っています。
作成したいフォームは、
必須動作がない場合はサーバーへは送信せずエラーを表示し、
必須動作を満たす場合のみサーバーへ送信する（次ページに行く）検証ページの仕組みです。
前提
所定のボタン[見積りボタン]を押さずに送信ボタン[内容確認ボタン]をクリックすると、
「必須です」というエラーが表示されます。
以下のコードは、「JavaScriptを使った基本的なフォームの検証」というページを参考に作ったものです。
今回は「ボタンクリック動作」を必須項目にしたいと考えております。
具体的には、
「見積り」ボタンを押している → 次のページに飛ぶ
「見積り」ボタンを押していない → サーバーに送信する前に「必須です」というエラーを表示させる。
という具合です。
============＜修正点＞=================
発生している問題・エラーメッセージ
１. フラグを用意する
phpの47行目
<input class="push" type="hidden" name="swich" value=""></input>
のclass=""push"のvalueをフラグにすることにした。
・valueが空白なら → サーバー送信する前にエラー文字を表示
２. [見積り]のボタンを押すと、value="on"の追加
見積りボタンを押すとjavascriptの36行目からの操作で
<input class="push" type="hidden" name="swich" value="on"></input>
が追加される。
↑↑ 3. の内容確認ボタンを押したときにclass="push"のvalueが"on"変わってほしいです。
→ <input class="push" type="hidden" name="swich" value="on"></input>が反映されてほしい。
該当のソースコード
php
1<?php2var_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 echo $page_flag;13?>14 15<?php if( $page_flag === 1 ): ?>16 17<!DOCTYOE html>18<html lang="ja">19<head>20 <meta charset=shift_jis"> 21 <title>フォームテスト</title>22</head>23 24<body>25 <p>内容確認</p>26 <p>\10,000</p>27 <p>これでいいですか？？</p> 28</body>29 30 31<?php else: ?>32 33<!DOCTYOE html>34<html lang="ja">35<head>36 <meta charset="shift_jis">37 <title>フォームテスト</title>38 <script type="text/javascript" src="modules/js/jquery.min.js"></script>39 <script type="text/javascript" src="jsfile/test2.js"></script>40 <link rel="stylesheet" href="daikou19-css/test.css">41</head>42 43<body>44 <form name="myForm" class="btn_push" method="post" action="" novalidate>45 <input class="push" type="hidden" name="swich" value="on"></input>46 <input type="button" value="見積り">47 <div id="swich"></div>48 <div id="output_message"></div>49 <button name="registration" value="内容確認">内容確認</button>50 <button value="もどる" onClick="JavaScript:history.back()">もどる</button>51 </form>52</body>53</html>54<?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 const createError = (elem, errorMessage) => {7 const errorSpan = document.createElement('span');8 errorSpan.classList.add(errorClassName);9 errorSpan.setAttribute('aria-live', 'polite');10 errorSpan.textContent = errorMessage;11 elem.parentNode.appendChild(errorSpan);12 }13 btn_push.addEventListener('submit', (e) => {14 const errorElems = btn_push.querySelectorAll('.' + errorClassName);15 errorElems.forEach( (elem) => {16 elem.remove();17 });18 pushElems.forEach( (elem) => {19 const elemValue = elem.value.trim();20 if(elemValue.length === 0) {21 createError(elem, '必須です');22 e.preventDefault();23 }24 });25 });26 }27});28 29$(document).ready(function () {30 $("input:button").click(function(){31 swich = "<input class=\"push\" type=\"hidden\" name=\"swich\" value=\"on\"></input>";32 input_message = "見積りしました。<br> \\10,000<br>になります";33 document.getElementById("output_message").innerHTML = input_message;34 document.getElementById("swich").innerHTML = swich;35 });36});
0 コメント