バリデーションエラーのポップアップが連続して出る。
バリデーションエラーのポップアップが連続して出る。
phpで問い合わせフォームの作成でバリデーションのエラーのポップアップが連続出てきてしまうのでこれらをどうにかしたい
jsのバリデーションとphpのバリデーションは二つかけてもOK
だが、jsのポップアップがなぜ2回繰り返し出て来るのかがわからないのでご教授願います
問題のエラー
https://gyazo.com/291ad277bbe320b7f42d7c402b3e25fd
該当するソースコード
contact.php
<?php include 'layouts/header.php'; ?>
<?php session_start() ?>
<div class="form-wrapper">
<div class="error">
<h1>
<?php
if(isset($_SESSION["texts"])){
foreach($_SESSION["texts"] as $error){
echo $error."<br>";
}
}?>
</h1>
</div>
<div class="form">
<div class="form-title">
<h1>お問い合わせ</h1>
</div>
<div class="form-main">
<div class="back">
<h2>下記の項目をご記入の上送信ボタンを押してください</h2>
</div>
<p>送信頂いた件につきましては、当社より折り返しご連絡を差し上げます。<br>
なお、ご連絡までに、お時間を頂く場合もございますので予めご了承ください。<br>
<span>*</span>は必須項目となります。</p>
<form action="" method="POST">
<div class="form-contents">
<div class="form-content">
<h3>氏名<span>*</span></h3>
<input type="text" name="name"
value="<?php
if(!empty($_SESSION["name"])){
echo $_SESSION["name"];
}
?>" placeholder="山田太郎" class="inputName">
</div>
<div class="form-content">
<h3>フリガナ<span>*</span></h3>
<input type="text" name="kana"
value="<?php
if(!empty($_SESSION["kana"])){
echo $_SESSION["kana"];
}
?>" placeholder="ヤマダタロウ" class="inputKana">
</div>
<div class="form-content">
<h3>電話番号</h3>
<input type="text" name="phone"
value="<?php
if(!empty($_SESSION["phone"])){
echo $_SESSION["phone"];
}
?>" placeholder="09012345678" class="inputPhone">
</div>
<div class="form-content">
<h3>メールアドレス<span>*</span></h3>
<input type="text" name="address"
value="<?php
if(!empty($_SESSION["address"])){
echo $_SESSION["address"];
}
?>" placeholder="test@test.co.jp" class="inputAddress">
</div>
</div>
<div class="back">
<h2>お問い合わせ内容をご記入ください<span>*</span></h2>
</div>
<textarea name="question" class="inputQuestion"><?php
if(!empty($_SESSION["question"])){
echo $_SESSION["question"];
}?></textarea><br>
<input type="submit" value="送 信" class="form-submit" formaction="validate.php" >
</form>
</div>
</div>
</div>
<?php include 'layouts/footer.php'; ?>
<script type="text/javascript" src="index.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</body>
</html>
validate.php
validate.php
<?php
session_start();
foreach($_POST as $key => $val){
$_SESSION[$key] = $val;
}
$error = 0;
$errorText = [];
if(empty($_SESSION["name"])) {
array_push($errorText,"名前を入力してください。");
$error++;
};
if(mb_strlen($_SESSION["name"]) >10) {
array_push($errorText,"名前は10文字以内で入力してください。");
$error++;
};
if(empty($_SESSION["kana"])) {
array_push($errorText,"フリガナを入力してください。");
$error++;
};
if(mb_strlen($_SESSION["kana"]) > 10) {
array_push($errorText,"フリガナは10文字以内で入力してください。");
$error++;
};
if(is_numeric($_SESSION["phone"]) == false) {
array_push($errorText,"電話番号は0~9の数字で入力してください。");
$error++;
};
if(empty($_SESSION["address"])) {
array_push($errorText,"メールアドレスを入力してください。");
$error++;
};
if(!empty($_SESSION["address"]) && !preg_match("/.@./",$_SESSION["address"])) {
array_push($errorText,"正しいメールアドレスを入力してください。");
$error++;
};
if(empty($_SESSION["question"])) {
array_push($errorText,"お問い合わせ内容を入力してください。");
$error++;
};
if($error == 0 ){
header("Location:confirm.php");
} else {
unset($_SESSION["texts"]);
foreach($errorText as $text){
$_SESSION["texts"][] = $text;
}
header("Location:contact.php");
}
?>
該当するソースコード
index.js
window.addEventListener('DOMContentLoaded', function(){
if (document.URL.match("/contact.php") || document.URL.match("/confirm.php") || document.URL.match("/complete.php")){
$(".header-container").addClass('fixedBlack');
}
$(".form-submit").on("click",function(){
$error = 0;
$errorText = [];
if($(".inputName").val() == "") {
$errorText.push("名前を入力してください。");
$error++;
};
if($(".inputName").val().length > 10) {
$errorText.push("名前は10文字以内で入力してください。");
$error++;
};
if($(".inputKana").val() == "") {
$errorText.push("フリガナを入力してください。");
$error++;
};
if($(".inputKana").val().length > 10) {
$errorText.push("フリガナは10文字以内で入力してください。");
$error++;
};
if(!$.isNumeric($(".inputPhone").val())) {
$errorText.push("電話番号は0~9の数字で入力してください。");
$error++;
};
if($(".inputAddress").val() == "") {
$errorText.push("メールアドレスを入力してください。");
$error++;
};
if(!$(".inputAddress").val() == "" && !$(".inputAddress").val().match(".@.")) {
$errorText.push("正しいメールアドレスを入力してください。");
$error++;
};
if($(".inputQuestion").val() == "") {
$errorText.push("お問い合わせ内容を入力してください。");
$error++;
};
if($error > 0){
$errorLog = "";
$.each($errorText,function(key,val){
$errorLog = $errorLog +"\n"+val;
});
alert($errorLog);
}
});
});
自分で試したこと
資料
https://support.r-cms.jp/help/detail/id=903
https://www.sejuku.net/blog/29821
みてみたがもう一つ該当しそうなものは得られず…
0