質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.80%

送信ボタン押下にエラー表示させる方法

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 1,566

takeke

score 59

phpでフォームを作成しています。フォーム画面でフォームに入力、送信し、フォーム内容が空白などの不具合がある場合には、ページ移動する前にエラーとエラーの内容を出すようにしたいのですが、どのような記述を書けばいいのかがよくわからないのでアドバイスなどいただけたら幸いです。

現在の記述です。if(isset($_POST['send])){}で判定するのかな?とは思っているのですが全く効いていない模様で、ページ遷移してしまいます。

<?php
if(isset($_POST['send'])){
    $err = array();
    if(!$_POST['name_form']) {
        $err['name_form'] = '名前を入力して下さい';
    }
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>フォームPHP&mysql</title>
    <link rel="stylesheet" type="text/css" href="css/task_ex1.css">
</head>
<body>
    <legend class="form form_width"><h1 class="title_form">フォーム</h1>
        <form name="form" class="page" id="page" action="php/task_ex1_list.php" method="post">
            <div>
                <label for="textForm">名前:</label>
                <input type="text" placeholder="名前入力してください" size="50" maxlength="50" name="name_form" id="textForm">
            </div>
            <div>
                <label for="radioForm" class="gender">性別:</label>
                <label for="gender1">男性</label><input type="radio" name="gender" value="男性" id="gender1">
                <label for="gender2">女性</label><input type="radio" name="gender" value="女性" id="gender2">
                <label for="gender3">その他</label><input type="radio" name="gender" value="その他" id="gender3" checked="checked">
            </div>
            <div class="age">
                    年齢:<select name="age" id="selbox">
                                <option value="~20代">~20代</option>
                                <option value="30代~40代">30代~40代</option>
                                <option value="50代~60代">50代~60代</option>
                                <option value="70代~">70代~</option>
                            </select>
            </div>
            <div class="questionnaire">
                    アンケート:好きな色(複数選択可)
                    <input type="checkbox" name="q1[]" value="赤" id="color1" ><label for="color1"></label>
                    <input type="checkbox" name="q1[]" value="青" id="color2" ><label for="color2"></label>
                    <input type="checkbox" name="q1[]" value="黄" id="color3" ><label for="color3"></label>
                    <input type="checkbox" name="q1[]" value="緑" id="color4" ><label for="color4"></label>
                    <input type="checkbox" name="q1[]" value="紫" id="color5" ><label for="color5"></label>
            </div>
            <div class="free_space">
                    自由記入欄:<br>
                    <textarea id="freeSpace" name="free_space" cols="50" rows="6" maxlength="250" placeholder="ご自由にご記入して下さい" ></textarea>
            </div>
            <div class="btn"> 
                <input class="button" type="submit" id="button" value="登録する" name="send" >
                <input class="button" type="reset" value="クリア">
                <input class="button" type="button" value="一覧画面" onClick="location.href='php/task_ex1_list.php'">

            </div>
        </form>
    </legend>
</body>
</html>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • x_x

    2018/09/27 17:34

    PHPはサーバー側の処理のため、動いている時点でもう遷移しています。JavaScriptの処理ではないのでしょうか?

    キャンセル

  • takeke

    2018/09/27 17:52

    コメントありがとうございます!あ、、、なるほど、できたらJavaScriptやjQueryなしでやりたかったのですが、エラーを表示させるとなるとこの場合JavaScriptが適切ということですよね?

    キャンセル

回答 3

+1

いちばん手抜きな方法は、<input>required属性をかけることです。

<input type="text" placeholder="名前入力してください" size="50" maxlength="50" required name="name_form" id="textForm">

iOS 10.3以上、IE 10以上を含め多くのブラウザで、これだけで入力のないフォームの送信を阻止できるようになります。

ただし、意図的に不適切な入力をしようとする場合には無力ですので、サーバサイドでのチェックも合わせて行う必要があります。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/27 18:00

    ありがとうございます!
    それだけでいけるんですね!できたら、ページ遷移前にエラー表示させたいんですが、その場合はPHPとhtmlとcssだけじゃ無理でしょうか?

    キャンセル

  • 2018/09/27 18:01

    はい、requiredによるチェックは遷移前に入ります。

    キャンセル

  • 2018/10/01 02:17

    ベストアンサー迷ったのですが、エラーメッセージも少し変えたいとも思ってたので、3番の方にさせていただきましたm(_ _)m
    しかし、こちらは特に表示に拘らなければとても便利なんですね!勉強になりました!ありがとうございましたm(_ _)m

    キャンセル

checkベストアンサー

0

validationengineというのがあります
フォーカスアウト時にバルーンが出るよくみるあれです
ぐぐってみてください。
割と簡単で見栄えもよいです
http://www.webdesign-fan.com/jquery-validation-engine

検索すると使い方は沢山出てくると思います。
これだけでは不十分なのでサーバ側でチェックも必要となると思います
(ほぼValidationengineではじかれると思いますが)
電話番号やメールチェックなども割りとそろっていたはずです。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/10/01 02:11

    かいとうありがとうございます!

    とても参考になり、メッセージも変更できたので助かりましたありがとうございました!

    キャンセル

0

PHP側に送った後確認ページを表示するのが妥当ですね
確認ページではバリデーションを通ったデータはセッションで持てば
修正が必要な箇所だけ再入力を促すことが可能です

遷移しないでやるならすでに回答がある通りrequiredかpattern
もしくはjavascriptを駆使して処理します

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/09/27 18:11

    回答ありがとうございます!
    ということは、このページの次に確認ページを一つ用意するんですよね?それか、このページの送信先が一覧画面なんですが、DBに登録する前に、POSTを確認して、不備がある場合には強制的にこの登録画面にエラー表示と一緒に遷移させることってできますか?

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る