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

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

ただいまの
回答率

89.54%

フォームのボタン押下時にダイアログを出す

解決済

回答 1

投稿 編集

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

lyzmfeqpxs54

score 198

タイトルのとおりなのですが、form_forなどでボタンを作り、押されたときにフォームの内容をチェックして保存成功やメールアドレスは半角で入力してくださいなどのメッセージを表示したいと考えております。

「data:」で押された際に確認メッセージを表示するという記事は多く見受けられたのですが、押された際に成功時、失敗時に分けてダイアログを表示するという記事を探せずこちらに質問させていただきました。

また、「data:」で一度確認ダイアログを表示してみようと以下のように書いてみたのですが、何もダイアログが表示されず通常通りのボタンの動作が行われるだけでした。

正しいやり方をご教示いただければ幸いです。
よろしくお願いいたします。

<%= form_with(model: @userinfo) do |f| %>
  ・
  ・   省略
  ・

    <%= f.submit '適用', data: { confirm: "適用しますか?"} %>
<% end %>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

回答 1

checkベストアンサー

+1

rails独自の機能でvalidationまでやってテキストを表示したりなどのユーザーにvalidationにひっかかったことを伝えるのは難しそうです。

ここは素直にformのsubmitにjqueryのイベントをフックさせて調査したほうが簡単だし、昨日の変更などに強いと思います。

form_withへのidの付与がいまいちわかってないのですが、そこは調べてください!!(笑)

<html>
<head>
<meta charset="UTF-8" />

<style>
  #validations{color: red;}
</style>
</head>
<body>
<form id="jsForm">
  <div id="validations"></div>
  <label>
    <span>ユーザー名(6文字以上24文字以下)</span>
    <br />
    <input type="text" placeholder="username" id="text"/>
  </label>
</form>

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
  // validationのメッセージをsetする
  var setValidationMessages = function(messages){
    var messages = messages.join('\n')
    $('#validations').html(messages)
  }

  // フォームがsubmitされたら呼ばれる
  // return falseするとするとformが送信されない
  // return trueするとformが送信される
  $("#jsForm").on('submit', function(){

    // validation用のメッセージなどの配列を用意
    var validationMessages = []

    // ユーザー名を取る
    var userNameLength = $("#text").val().length;

    // 今表示されているvalidationのmessageをなくす
    setValidationMessages([])

    // validationを書ける。引っかかったら文言を入れる
    if(userNameLength < 6 || userNameLength > 24){
      validationMessages.push('ユーザー名は6文字以上24文字以下で入力してください')
    }

    // いろんなvalidationをやって(usernameとかpasswordとか色々)メッセージが入っていたらメッセージを表示してreturn falseする
    if(validationMessages.length){
      setValidationMessages(validationMessages)
      return false
    }

    // messegeがなかったらtrueを返す
    return true;
  })

</script>
</body>
</html>

イメージ説明

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2017/09/05 11:59

    度々のご回答ありがとうございます。言葉が足らず申し訳ございません。
    「jsを使用しない場合」という意味合いです。
    アプローチの仕方をご教示ただければと思います。

    キャンセル

  • 2017/09/05 12:21

    保存成功をrailsのレンダリングのみでやるのは非常に難しいかと思います。
    ここで絶対に無理と言わないのは仕様書を細部まで読み込めばもしかしたら出来る可能性が1%くらいあったり、ゴリゴリrailsをかけば実現不可能ではないかもしれないからです。

    質問者様のレベルがわからないので失礼になってしまったら申し訳ないのですが、
    今回実現したいことは以下の通りかと思います。

    1. form送信前にvalidationに引っかかっていないかチェックしたい
    2. 引っかかっていたらdialogを出してユーザーに知らせたい
    3. 引っかかっていなかったらデータを送信して、dialogに「成功!」みたいに出したい

    仮にこれを満たす用に実装するとしたら以下のような技術が必要になります。

    【1. form送信前にvalidationに引っかかっていないかチェックしたい】
    1-1htmlだけでvalidationをかける場合、html5から実装されている[データフォームの検証](https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Data_form_validation)を使用する
    1-2. javascriptでvalidationを書ける場合は回答したような感じになります。

    2と3に関してですが、これを行いたい場合はAjaxというJavaScriptを用いて通信する必要性があります。
    質問者様がおっしゃっているform送信の成功を取得するためには必ずrailsとやりとりの通信を行わないといけません。
    通常の通信形態はrailsを介して行うのですが、通信を行った後にjsのwindow.alert('成功しました')みたいに出したい場合は、jsで通信を行うほうが簡単です。

    ただ質問者様が仰っていることを実現することは可能です。
    個人的な経験則からで言うとその実装はおすすめしませんが。
    間隔地を伝えるのが難しいのですが、jsを使わない方向は茨の道を進んでいく気がします。。。

    一応、仮にvalidationにjsを(ほぼ)使わない場合の実装をするとしたときの考え方を書いておきます!
    (2回目ですが、メッチャおすすめしません)
    railsにformを送信する

    validationに引っかかる

    @post.errorsみたいな感じでエラーの内容が配列で返ってくる

    <script> var erros = <%= @post.errors %> </script>
    のようにjsの変数に変更する

    <script> if(errors.length > 0) window.alert('何かvalidationに引っかかりました')</script>
    のような感じでjsのエラーを出力する

    のような感じです!

    キャンセル

  • 2017/09/05 20:51

    詳細な解説をご教示いただき、本当にありがとうございます。railsのレンダリングだけで行うのはかなり難しそうですね……。教えていただいたjsを用いた方法で実装を行いたいと思います。また、よろしくお願いいたします。

    キャンセル

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

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