お問合せフォーム(form.html)にて、ajaxを使用し、入力したデータをphp(form_complete.php)へ送りphp側でバリデーションを行い、バリデーションに引っかからなければform_complete.phpのhtml部分を表示し、バリデーションに引っかかった場合はform.htmlの入力フォーム横にエラーメッセージを表示したいと考えています。
以下は、ajax処理を記載したform.jsになります

$(function(){
  $("#form_button").submit(function(){
    var checks = [];
    $("[name='check[]']:checked").each(function(){
      checks.push(this.value);
    });

    $.ajax({
      url:'form_complete.php',
      type:'POST',
      dataType:'json',

      data:{
        name:$('.input_name').val(),
        age:$('.input_age').val(),
        "color":checks
      },
    })
    .then(
      function(data){
        
      },
      function(){
        
      }
    )

  });
});

上記thenメソッドにはリクエストに成功した場合、失敗した場合を記載しますが、リクエストが成功というのは、php側にデータが渡った段階のことでしょうか？php側で処理を行い、バリデートで失敗した場合は、非同期通信で、フォーム入力項目の横にエラーメッセージを表示したいのですが、そのようなことは可能でしょうか?
どのような方法を取ればよいか分からないため、教えて頂きましたら幸いです。

yambejp

2019/08/07 10:21

form.htmlとform.phpはわける必要があるのでしょうか？ form.phpのhtml部分とはなんでしょう？jsonで返すようなAPIではない？ソース内のform_complete.phpは何をするのでしょうか？

aae_11

2019/08/07 10:26

＞form.htmlとform.phpはわける必要があるのでしょうか？ form.htmlにて、送られた値がバリデーションチェックに引っかからなかった場合、form.phpを表示したいと考えています。 html部分は、form.php内の<html></html>内に記述した部分になります。 form_complete.phpはform.phpのことでした。修正いたします。

yambejp

2019/08/07 10:28

そうなると戻り値にjsonを指定しているので、form.phpはhtmlを持っていませんね

aae_11

2019/08/07 10:35

すみません。jsonを指定していると、form.phpはhtmlをもっていないとはどういうことなのでしょうか...?

yambejp

2019/08/07 10:41

戻り値がjsonということはform.phpが吐くのはjsonだということですそうでなければajaxはエラーになります。逆にform.phpがjsonを返す場合、form.phpからhtmlを得ることはできません。

行動規範の内容に同意します

回答1件

ベストアンサー

修正しました

仕様

.nameは入力必須
.ageは入力必須かつ整数

javascript
1<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
2<script>
3$(function(){
4  $("#form_button").on('click',function(e){
5    $(".name,.age").next('.err').text("");
6  });
7  $(".name").on('invalid',function(e){
8    $(this).next('.err').text("入力必須です");
9  });
10  $(".age").on('invalid',function(e){
11    var err=$(this).val()==""?"入力必須です":"整数を指定してください";
12    $(this).next('.err').text(err);
13  });
14});
15</script>
16<form method="form.php"  method="post">
17<div>
18<label><input type="checkbox" name="check[]" value="1">1</label>
19<label><input type="checkbox" name="check[]" value="2">2</label>
20<label><input type="checkbox" name="check[]" value="3">3</label>
21</div>
22<div>
23name:<input type="text" name="name" class="name" value="" required><span class="err"></span>
24</div>
25<div>
26age:<input type="text" name="age" class="age" value="" pattern="[0-9]+" required><span class="err"></span>
27</div>
28<input type="submit" value="send" id="form_button">
29</form>

投稿2019/08/07 10:43

編集2019/08/07 11:19

yambejp

総合スコア114767

yambejp

2019/08/07 10:50 編集

name,age,colorを送るとしてどういうバリデートをしてどういうエラーを返すapiにしたいのか書かないと回答のしようがないですねバリデート用のプログラムがform_complete.phpだったとしてエラー時はサブミットを止める？エラーがなかったらform_complete.phpではないなにか別のphp(仮にform.php)にsubmitする？でもデータが偽装されることを考えると結局あたらしいform.phpでもバリデートしなくてはいけないので form_complete.phpのバリデートはあまり意味がないですよ

yambejp

2019/08/07 10:54

ajaxでバリデートするくらいならpatternとrequiredで十分だと思います

aae_11

2019/08/07 11:04

ご回答ありがとうございます。自分は、formの入力フォームがありそこから入力されたデータに対しバリーデートを行い、バリデーションチェックに引っかかった場合のみ、元のフォームの入力フォーム横にエラーメッセージを出したいと考えています。仮に、バリデーションチェックに引っかからなかった場合は、別のページに送信結果を表示させたいです。バリデーションチェックは、名前は必須チェック、年齢は整数(0以上)であることを条件にしたいと考えています。チェックボックスは設定しない想定です。

aae_11

2019/08/07 11:10 編集

ajaxでの非同期通信の勉強もしたいのと、お問合せフォームでのajax通信はページのちらつきもなかった為、便利だなと思ったもので、作成してみたかったといった感じです。 form_complete.phpなどとファイル名を記載したのですが、実際はajaxでお問合せフォームの処理が可能でありましたら、特にどのファイルにて、特定の処理をさせたいというのはないといった感じです。

yambejp

2019/08/07 11:20

どうも認識がずれているようなのでサンプル上げておきましたバリデートにajaxが活躍することはないと思ったほうがいいでしょう

aae_11

2019/08/07 11:54

ありがとうございます。基本的には、ajax処理にバリデーションを記載するということはあまりないのでしょうか...?

yambejp

2019/08/07 12:07

そうですね、ajaxでやる意味がまったくないのでありません。送らないでもバリデーションはjsでできますので

aae_11

2019/08/07 12:20 編集

もしかしたら、まだ自分はajaxなどの仕組みについて理解できていないのかもしれないです... ajaxにではなく普通にjavascriptでバリデーションし、チェックに引っかかった場合にエラーメッセージを表示する場合も、ページのちらつきなどは発生しないのでしょうか...? 若干混乱してる部分あって、申し訳ないです...

行動規範の内容に同意します