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

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

ただいまの
回答率

90.33%

  • PHP

    21346questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17538questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    7110questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Laravel 5

    2082questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • Ajax

    1155questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Laravelでのバリデーションでエラー文が表示されない

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 524

masateru2

score 23

現在LaravelでCRUDを製作しています。

モーダルで新規作成を行なっているのですが、Laravelのバリデーションを使って、入力していない状態でリダイレクトさせることはできたのですが、エラー文をモーダルに表示させることができません。

問題点?

POST通信をAjaxで行なっているから?
bootstrapのモーダルを使っているから?

コード

//HomeController.php
//一部抜粋
    public function store(Request $request) {
      $this->validate($request,[
        'title' => 'required',
        'body' => 'required',
      ],[
        'title' => 'error',
        'body' => 'erroe',
      ]);

    $article = new Article;
    $article->title = $request->title;
    $article->body = $request->body;
    $article->save();

    return view('store');
  }
//top.blade.php
  @extends('layouts.app')

  @section('content')
  <!doctype html>
  <html lang="ja">
      <head>
        <title>TOP</title>
          <meta charset="utf-8">
          <meta http-equiv="X-UA-Compatible" content="IE=edge">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <meta name="csrf-token" content="" />
          <!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> -->
          <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
          <script type="text/javascript" src="js/post.js"></script>
          <title>Top</title>

          <!-- Fonts -->
          <link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
      </head>
        <h1>A table</h1>
        <button type="button" class="btn btn-primary create_btn" data-toggle="modal" data-target="#createModal">New addition</button>
        @foreach ($articles as $article)
        <div class="card mb-2">
          <div class="card-body">
            <h4 class="card-title">{{ $article->title }}</h4>
            <h6 class="card-subtitle mb-2 text-muted">{{ $article->updated_at }}</h6>
            <p class="card-text">{{ $article->body }}</p>
            <button type="button" class="btn btn-primary delete_btn" data-toggle="modal" data-target="#deleteModal" value="{{ $article->id }}">Delete</button>
          </div>
      </div>
   @endforeach

//新規作成モーダル部分
  <!-- CreateModal -->
  <div class="modal fade" id="createModal" tabindex="-1" role="dialog" aria-labelledby="createModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="createModalLabel">CreateArticle</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>

        <form method="post" action="/create" id="createform">
          {{ csrf_field() }}
          <div class="modal-body">
            <h2>Title</h2>
            <input type="textbox" class="form-control" id="titleInput" name="title" >
            <h2>Body</h2>
            <textarea class="form-control" id="bodyInput" rows="3" name="body"></textarea>
            </div>
            <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <!-- <button type="submit" class="btn btn-primary">Create</button> -->
          <button type="submit" class="btn btn-primary" id="create_btn">Create</button>
        </form>
      </div>
    </div>
  </div>
</div>
</html>
  @endsection
//web.php
<?php

Auth::routes();

Route::get('/', 'IndexController@index');
Route::get('/home', 'HomeController@index')->name('home');
Route::get('/top', 'HomeController@top');
Route::post('/top', 'HomeController@delete');
Route::post('/create', 'HomeController@store');
//post.js
validateのoption作成
 var Valids = {
     //入力欄別にルールを作成
     rules:{
         title:{
             required:true
         },
         body:{
             required:true
         },
     },
   }
$(function(){
  /**
   * 送信ボタンクリック
   */
  $('#create_btn').click(function() {
    //validate実行(作成したvalidateのoptionを指定)
         $("#createform").validate(Valids);
         //失敗で戻る
         if (!$("#createform").valid()) {
             return false;
         };
    /**
     * Ajax通信メソッド
     * @param type  : HTTP通信の種類
     * @param url   : リクエスト送信先のURL
     * @param data  : サーバに送信する値
     */
    $.ajax({
      type: "POST",
      url: "delete.blade.php",
      data: {
        "title" : $("#titleInput").val(),
        "body" : $("#bodyInput").val()
      }
    }).done(function(data, dataType) {
      // successのブロック内は、Ajax通信が成功した場合に呼び出される


    }).fail(function(XMLHttpRequest, textStatus, errorThrown) {
      // 通常はここでtextStatusやerrorThrownの値を見て処理を切り分けるか、単純に通信に失敗した際の処理を記述します。

      // エラーメッセージの表示
      alert('Error : Please enter letters');
    });
    // サブミット(送信)後、ページをリロードしないようにする
    return false;
  });
});
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • mts10806

    2018/07/05 11:55

    「エラーがでているから?」という観点ではどうでしょうか。JavaScriptはエラーがあればおおよそそれ以降の処理は行われませんし

    キャンセル

  • masateru2

    2018/07/05 12:02 編集

    SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'title' cannot be null (SQL: insert into `articles` (`title`, `body`, `updated_at`, `created_at`) values (, , 2018-07-05 02:59:45, 2018-07-05 02:59:45))こんなエラーが出るんで、多分ajax通ってないんですかね?

    キャンセル

  • mts10806

    2018/07/17 13:10

    どのように解決されたのでしょうか? https://teratail.com/help/question-tips#questionTips4-2 > あなたがどのアドバイスを元に、どのように解決できたのかをお礼とともに伝えましょう。

    キャンセル

回答 1

checkベストアンサー

0

リクエストの受け取り方が違うのではないでしょうか。

    public function store(Request $request)
    {
        $name = $request->input('name');
    }

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2018/07/05 12:39

    SQLSTATE[HY000]: General error: 1364 Field 'title' doesn't have a default value
    ありがとうとございます!
    nullではなくしっかりとしたエラー文が帰ってくるようになりました!

    キャンセル

  • 2018/07/05 12:42

    前にどこか書いたかもしれませんが、マニュアル見てください。自分勝手なやり方ではフレームワークも何も意味がなくなってしまいます。

    NOT NULLフィールドにNULL入れようとしてるような記述なので、渡っていないことには変わりないですけどね。

    まあ・・・type=textbox なんてinputは存在しないわけですが。
    Formファサード入れたほうがいいのでは?
    https://qiita.com/Frog_woman/items/1fb35cf46181b6b7d3be

    キャンセル

  • 2018/07/05 12:44

    あとajaxで処理させてsubmitしないのであれば、form使う必要ないですよ。
    IDでvalueとってるのでどのformの入力コントロールとか関係ないわけですし。

    キャンセル

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

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

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

  • PHP

    21346questions

    PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

  • JavaScript

    17538questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • jQuery

    7110questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • Laravel 5

    2082questions

    Laravel 5は、PHPフレームワークLaravelの最新バージョンで、2014年11月に発表予定です。ディレクトリ構造がが現行版より大幅に変更されるほか、メソッドインジェクションやFormRequestの利用が可能になります。

  • Ajax

    1155questions

    Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。