JavaScriptでバリデーションチェックをやりたいです
質問失礼致します。
上記のようなエラーメッセージを、下記ページの「送信ボタン」を押したときにJavaScriptのエラーチェックによって表示させたいのですが、いまいちやりかたがわかりません。
解決したいこと
送信ボタンを押したときにエラーチェックを行い、エラーがあった場合はそれを「input」画面に表示させたい。
（）
発生している問題・エラー
やり方がわかりません。
該当するソースコード
HTML css PHP JavaScript
<?php
session_start();
$mode = 'input';
$errname = array();
$errname_kana = array();
$errphone_number = array();
$erraddress = array();
$errmsg = array();
if ( isset($_POST['back']) && $_POST['back'] ){
//何もしない
} else if ( isset($_POST['confirm']) && $_POST['confirm'] ){
if (!($_POST['name'])) {
$errname[] = "氏名は必須入力です。";
}else if (mb_strlen($_POST['name']) > 10) {
$errname[] = "10文字以内で入力ください。";
}
$_SESSION['name'] = htmlspecialchars($_POST['name'], flags: ENT_QUOTES);
if (!($_POST['name_kana'])) {
$errname_kana[] = "名フリガナは必須入力です。";
}else if (mb_strlen($_POST['name_kana']) > 10) {
$errname_kana[] = "10文字以内で入力ください。";
}
$_SESSION['name_kana'] = htmlspecialchars($_POST['name_kana'], flags: ENT_QUOTES);
if (!(preg_match("/[0-9]{9,11}/", $_POST['phone_number']))) {
$errphone_number[] = "電話番号は0-9の数字のみでご入力ください。";
}
$_SESSION['phone_number'] = htmlspecialchars($_POST['phone_number'], flags: ENT_QUOTES);
if (!($_POST['address'])) {
$erraddress[] = "メールアドレスは必須入力です。";
}else if (!(filter_var($_POST['address'], filter: FILTER_VALIDATE_EMAIL))) {
$erraddress[] = "メールアドレスは正しくご入力ください。";
}
$_SESSION['address'] = htmlspecialchars($_POST['address'], flags: ENT_QUOTES);
if (!($_POST['msg'])) {
$errmsg[] = "お問い合わせ内容は必須入力です。";
}
$_SESSION['msg'] = htmlspecialchars($_POST['msg'], flags: ENT_QUOTES);
$errmessage = [$errname, $errname_kana, $errphone_number, $erraddress, $errmsg];
$errcount = count(array_filter($errmessage, function ($error) {return !empty($error); }));
if ( $errcount > 0 ) {
$mode = 'input';
} else {
$mode = 'confirm';
}
} else if ( isset($_POST['send']) && $_POST['send'] ){
$mode = 'send';
} else {
$_SESSION['name'] = "";
$_SESSION['name_kana'] = "";
$_SESSION['phone_number'] = "";
$_SESSION['address'] = "";
$_SESSION['msg'] = "";
}
?>
<!DOCTYPE html>
<html lang="ja" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<title>Lesson Sample Site</title>
</head>
<body>
<header class="header_blog">
<?php require('header.php'); ?>
</header>
<?php if ( $mode == 'input' ): ?>
<main class="main_blog">
<h3 class="main_blog_h"><?= 'お問い合わせ' ?></h3>
<div class="main_blog_command">
<h4 class="blog_command"><?= '下記の項目をご記入の上送信ボタンを押してください' ?></h4>
</div>
<p class="command_p"><?= '送信頂いた件につきましては、当社より折り返しご連絡を差し上げます。<br>
なお、ご連絡までに、お時間を頂く場合もございますので予めご了承ください。<br>' ?>
<span>*</span><?= 'は必須項目となります。' ?></p>
<form class="contact_name" action="./blog.php" method="post">
<h4 class="contact"><?= '氏名' ?><span>*</span><br></h4>
<?php
if ( $errname ) {
echo '<div style = "color: red; line-height: 18px;">';
echo implode( $errname );
echo '</div>';
}
?>
<input class="contactform" type="text" name="name" value="<?php echo $_SESSION['name'] ?>" placeholder="両津勘吉"><br>
<h4 class="contact"><?= 'フリガナ' ?><span>*</span><br></h4>
<?php
if ( $errname_kana ) {
echo '<div style = "color: red;">';
echo implode( $errname_kana );
echo '</div>';
}
?>
<input class="contactform" type="text" name="name_kana" value="<?php echo $_SESSION['name_kana'] ?>" placeholder="リョウツカンキチ"><br>
<h4 class="contact"><?= '電話番号' ?><br></h4>
<?php
if ( $errphone_number ) {
echo '<div style = "color: red;">';
echo implode( $errphone_number );
echo '</div>';
}
?>
<input class="contactform" type="tel" name="phone_number" value="<?php echo $_SESSION['phone_number'] ?>" placeholder="09012345678"><br>
<h4 class="contact"><?= 'メールアドレス' ?><span>*</span><br></h4>
<?php
if ( $erraddress ) {
echo '<div style = "color: red;">';
echo implode( $erraddress );
echo '</div>';
}
?>
<input class="contactform" type="email" name="address" value="<?php echo $_SESSION['address'] ?>" placeholder="test@test.co.jp"><br>
<div class="main_blog_command">
<h4 class="blog_command"><?= 'お問い合わせ内容をご記入ください' ?><span>*</span><br></h4>
</div>
<?php
if ( $errmsg ) {
echo '<div style = "color: red;">';
echo implode( $errmsg );
echo '</div>';
}
?>
<textarea class="contactform_textarea" type="text" name="msg"><?php echo $_SESSION['msg'] ?></textarea><br>
<div class="send">
<input class="send_name" type="submit" name="confirm" value="送 信">
</div>
</form>
<?php elseif ($mode == 'confirm'): ?>
<main class="main_blog">
<h3 class="main_blog_h"><?= 'お問い合わせ' ?></h3>
<p class="please"><?php echo '下記の内容をご確認の上送信ボタンを押してください<br>
内容を訂正する場合は戻るを押してください。' ?></p>
<form class="" action="./blog.php" method="post">
<h4 class="confirm_question"><?php echo '氏名' ?></h4>
<p class="confirm_answer"><?php echo $_SESSION['name'] ?></p>
<h4 class="confirm_question"><?php echo 'カタカナ' ?></h4>
<p class="confirm_answer"><?php echo $_SESSION['name_kana'] ?></p>
<h4 class="confirm_question"><?php echo '電話番号' ?></h4>
<p class="confirm_answer"><?php echo $_SESSION['phone_number'] ?></p>
<h4 class="confirm_question"><?php echo 'メールアドレス' ?></h4>
<p class="confirm_answer"><?php echo $_SESSION['address'] ?></p>
<h4 class="confirm_question"><?php echo 'お問い合わせ内容' ?></h4>
<p class="confirm_answer_over"><?php echo nl2br($_SESSION['msg']) ?></p>
<div class="submits">
<form class="confirm_form" action="./blog.php" method="post">
<input class="confirm_submit_a" type="submit" name="send" value="送信">
</form>
</form>
<form class="confirm_form" action="./blog.php" method="post">
<input class="confirm_submit_b" type="submit" name="back" value="戻る">
</form>
</form>
<?php else: ?>
<main class="comp_main">
<div class="comp_name">
<h2><?php echo 'お問い合わせ' ?></h2>
</div>
<p class="comp_msg"><?php echo 'お問い合わせ頂きありがとうございます。<br>
送信頂いた件につきましては、当社より折り返しご連絡を差し上げます。<br>
なお、ご連絡までに、お時間を頂く場合もございますので予めご了承ください。' ?></p>
<!-- <form class="comp_form" action="form.php" method="post"> -->
<a class="last_question" href="./form.php"><?php echo 'トップへ戻る' ?></a>
<!-- </form> -->
</main>
<?php endif; ?>
</main>
<footer class="footer_blog">
<?php require('footer.php'); ?>
</footer>
<script type="text/javascript" src="validation.js"></script>
</body>
</html>
是非教えて頂きたいです。
よろしくお願いいたします。
0
