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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Q&A

解決済

1回答

3670閲覧

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

lyzmfeqpxs54

総合スコア237

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

0グッド

0クリップ

投稿2017/09/02 05:47

編集2017/09/04 00:50

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

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

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

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

Ruby

1 2<%= form_with(model: @userinfo) do |f| %> 34 ・ 省略 56 7 <%= f.submit '適用', data: { confirm: "適用しますか?"} %> 8<% end %> 9

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

html

1 2<html> 3<head> 4<meta charset="UTF-8" /> 5 6<style> 7 #validations{color: red;} 8</style> 9</head> 10<body> 11<form id="jsForm"> 12 <div id="validations"></div> 13 <label> 14 <span>ユーザー名(6文字以上24文字以下)</span> 15 <br /> 16 <input type="text" placeholder="username" id="text"/> 17 </label> 18</form> 19 20<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 21<script> 22 // validationのメッセージをsetする 23 var setValidationMessages = function(messages){ 24 var messages = messages.join('\n') 25 $('#validations').html(messages) 26 } 27 28 // フォームがsubmitされたら呼ばれる 29 // return falseするとするとformが送信されない 30 // return trueするとformが送信される 31 $("#jsForm").on('submit', function(){ 32 33 // validation用のメッセージなどの配列を用意 34 var validationMessages = [] 35 36 // ユーザー名を取る 37 var userNameLength = $("#text").val().length; 38 39 // 今表示されているvalidationのmessageをなくす 40 setValidationMessages([]) 41 42 // validationを書ける。引っかかったら文言を入れる 43 if(userNameLength < 6 || userNameLength > 24){ 44 validationMessages.push('ユーザー名は6文字以上24文字以下で入力してください') 45 } 46 47 // いろんなvalidationをやって(usernameとかpasswordとか色々)メッセージが入っていたらメッセージを表示してreturn falseする 48 if(validationMessages.length){ 49 setValidationMessages(validationMessages) 50 return false 51 } 52 53 // messegeがなかったらtrueを返す 54 return true; 55 }) 56 57</script> 58</body> 59</html>

イメージ説明

投稿2017/09/04 02:40

MasakazuFukami

総合スコア1869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

lyzmfeqpxs54

2017/09/04 03:59

ご回答ありがとうございます。ご教示いただいた方法で、メッセージを表示することができました。 不勉強で申し訳ありませんが、どうしてもダイアログのような形でバリデーションのメッセージを表示したい場合はどのようにすればよいのでしょうか。複雑だということですがアプローチの仕方をご教示いただければと思います。よろしくお願いいたします。
MasakazuFukami

2017/09/04 07:05 編集

jsを使用せずにということですかね? もし上記コードでバリデーション時にダイアログを出したい場合は if(validationMessages.length)の部分を変更して以下のようにすればよいかと思います! if(validationMessages.length){ window.alert('validationに引っかかってますよ') }
lyzmfeqpxs54

2017/09/05 02:59

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

2017/09/05 03: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のエラーを出力する のような感じです!
lyzmfeqpxs54

2017/09/05 11:51

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問