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

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

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

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

Ruby on Rails

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

Q&A

1回答

3908閲覧

バリデーションにJavascriptを使用した場合の制御

lyzmfeqpxs54

総合スコア237

Ruby

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

Ruby on Rails

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

0グッド

0クリップ

投稿2017/09/07 06:25

編集2022/01/12 10:55

いつもお世話になります。
現在Railsでwebページを作っており、入力フォームと保存ボタンがあります。
このフォームにバリデーションをかけメールアドレスが正しい表現の場合に送信というかたちを取っております。railsの機能としてモデルでバリデーションをかけていないのは、バリデーションにかかった際に「ダイアログ(確認ダイアログのようなもの)」にて「正しいメールアドレスを入れてください」を表示させたいと考えており、そういった場合(ダイアログを出したりする場合)Railsのレンダリング機能だけでは難しいとこちらで回答を頂いたためです。

現在下記コードのようにJavascript内でバリデーション処理を行っていますが、この場合ですとJavascriptが有効になっていない場合、このバリデーションにひっかからないため、できればJavascriptではダイアログを出すためだけとし、バリデーション処理を他(Rubyなど)に任せたいと考えています。

そこで質問なのですが、Railsのレンダリング機能だけでバリデーション後のダイアログを出すことは難しいのでしょうか。
またJavascriptでダイアログをレンダリングする場合、モデルでバリデーションを行った後にjavascriptで表示ということは可能でしょうか。

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

Ruby

1 2personal.html.erb 3<%= form_with(model: @userinfo, url: '/user/update', html: {id: 'inform_save', class: 'form'}) do |f| %> 4 <div class="field"> 5 <%= f.label :to %> 6 <%= f.email_field :to, size: 25, value: @userenter.to, id: "email_to" %> 7 </div> 8 <div class="field"> 9 <%= f.label :名前 %> 10 <%= f.text_field :XXXXX, id: "name" %> 11 </div> 12 <div class="actions"> 13 <%= f.submit '保存' %> 14 </div> 15<% end %> 16 17 18<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 19<script> 20 // validationのメッセージをsetする 21 var setValidationMessages = function(messages){ 22 var messages = messages.join('\n') 23 $('#validations').html(messages) 24 } 25 26 // フォームがsubmitされたら呼ばれる 27 // return falseでformが送信されない 28 $("#inform_save").on('submit', function(){ 29 // validation用のメッセージなどの配列を用意 30 var validationMessages = [] 31 // email_to部分の文字列を取得 32 //var emailTextLength = $("#email_to").val().length 33 var emailText = $("#email_to").val() 34 // 今表示されているvalidationのmessageを消す 35 setValidationMessages([]) 36 // validation:メールアドレス判定 37 if (!(emailText.match(/^([a-zA-Z0-9])+([a-zA-Z0-9._-])*@([a-zA-Z0-9_-])+([a-zA-Z0-9._-]+)+$/))) { 38 validationMessages.push('メールアドレスは半角英数字で入力してください') 39 window.alert('メールアドレスは半角英数字で入力してください') 40 } 41 // validation:名前が空欄でないかの判定 42 if (!(document.getElementById('terminal_name').value)) { 43 validationMessages.push('名前を入力してください') 44 window.alert('名前を入力してください') 45 } 46 // メッセージが入っていたらreturn false 47 if(validationMessages.length){ 48 return false 49 } 50 // messegeがなかったらtrueを返す 51 return true; 52 }) 53 54</script> 55 56 57

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

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

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

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

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

guest

回答1

0

ダイアログを出すことも可能です。
別の方法とはなってしまいますがこのようなもあります

投稿2017/10/04 11:51

laripappa

総合スコア39

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問