【Rails】そのurl名はすでに取得されています。をAjaxでやりたい。(Twitterの@以下のように)

Question

前提・実現したいこと

Railsアプリケーション作成中。
やりたいことはタイトルそのままです。
Ruby 2.4.5
Rails 4.2.8
Gem: friendly_urlを使用

いろいろ検索してみたのですが、期待する記事を見つけることができなかったのでこちらでヒントをいただけると嬉しいです。

(追記)
Twitterの@以下が一意制約で固有のものであるのや、質問箱でオリジナルのURLを設定できるのと同じような実装を考えています。

期待する動作は以下の通りです。

1. ユーザー情報編集画面でユーザーがオリジナルのfriendly_urlを設定
2. すでに取得されている場合、入力と同時にAjaxでアラートを表示

モデル側に一意制約(ユニーク制約)バリデーションを設定しているのですが、入力し送信する前にアラートを出したいです。
このアラートは、ヘッダー部分に表示されるものではなく、入力フォームの下に赤文字で表示されるようなイメージです。
というのも、編集画面をモーダルで行なっているため、送信ボタン押下後のアラート表示の方が難しいのではと思うからです。
もしこちらの方がかんたんにできそうということであればご教授いただけると嬉しいです。

該当のソースコード

モデルでuniqueness: trueの設定をしています。

モデル
user.rb

  #friendly_url
  include FriendlyId
  friendly_id :friendly_url

  validates :friendly_url, length: { in: 3..20 },
                         uniqueness: true, #一意性
                         format: { with: /\A[\w@-]*[A-Za-z][\w@-]*\z/ },
                         # on: :friendly_url_user #登録時に入力必要なし
                         allow_nil: true #無入力許可

ユーザー情報編集画面のモーダル上にあるフォームです。
edit.html.erb

<%= form_for @user do |f| %>
   <div class="modal-body">
     <label>
       <span>アイコン画像
         <%= f.file_field :avatar ,:style=>"display:none;" , id: 'avatar_img' %>
       </span>
     <div >
      <img src="#"/>
      <%= image_tag(@user.avatar(:medium), :size => "70x70") %>
     </div>
    </label>
    <ul>
    <li> ユーザー名<%= f.text_field :nickname, placeholder: "ニックネーム(必須)",:required => true %></li>
    <li> URL (3~20文字英数字)><%= f.text_field :friendly_url, placeholder: "URLを設定(英数字3-20文字)(必須)", :required => true %></li>
     <!--ここにエラーメッセージをAjaxで表示したい-->
    </ul>
  </div>
  <div class="modal-footer">
  <%= f.submit "完了", class: "btn" %>
 </div>
 <% end %>

試したこと

javascriptの知識が薄いのと、入力と同時にDBから情報をとってきて一意制約を確認するというフローをどう実装するのかイメージできていません。
また参考になりそうなサイトや記事などあれば教えていただけると嬉しいです。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[m.ts10806]

セキュリティ上気になる点なのでこちらで確認させていただきますが、
「そのユーザー名はすでに取得されています」とストレートに出してしまうと、悪意あるユーザーに対して「このユーザーは存在する」と情報を与えてしまうことになりませんか？「ログインしたユーザーしか使えない」仕組みなのであればなおさら避けられたほうが良さそうです。

[Romay]

コメントありがとうございます。タイトルは分かりやすくするため「ユーザー名」と表記していますが、実際の実装は、「一意制約のあるURLを設定する」ことです。Twitterの@以下が一意制約なことや質問箱のオリジナルURLの設定と同じようなものだと考えていただけると想像しやすいかと思います。また、このURLはログイン時には使用いたしません。質問内容が分かりにくくて申し訳ありません。

[m.ts10806]

了解です。少し二度手間になってしまいますが、あとから見たときにそのあたりが分かりやすいよう（誤解を与えにくいように）質問内容を調整いただけますか？

[Romay]

承知しました。ご意見いただきありがとうございます！

Answer 1

Rubyについては明るいわけではないので考え方、やり方の案だけ

・入力欄のフォーカスアウトでイベントを発火で入力値を取得
よく使われるのはblurです。

<input type="text" name="friendly_url" id="friendly_url">

※簡潔に書くためjQueryで記述しています

$('#friendly_url').on('blur',function(){
  let f_url = $(this).val();
});

・入力値をajaxで送信
Rubyによる扱いは詳しくないですが、基本はform送信と同じくPOST,GETなどで送信した内容を連想配列にして送信します。　参考：Rails で JavaScript を使用する
・入力値を受け取り、DB問い合わせ
※friendly_urlというのがどういうものか分かっていませんが、要は「入力値で検索する」ですね
・取得できた＝使われている　取得できない＝使われていない　として、Ajaxのレスポンスとする（JSON形式がよく使われます）
・レスポンスを受け取ってJavaScript側で結果を表示

JavaScript側だけ書くとこんな感じ。
※Railsでは表記などは違うかもしれませんが、イメージだけ持ってもらえたらと

$(function(){
	$('#friendly_url').on('blur',function(){
    	$(this).next('span.error').remove();
    	$(this).removeClass('input_error');
		let f_url = $(this).val();
		if(f_url == ""){
			$(this).addClass('input_error');
			$(this).after('<span class="error">入力してください</span>');
			$(this).focus();
			return;
		}
		$.ajax({
			type:'POST',
			url:'check',
			data:{url:f_url},
			dataType:'json',
		}).done(function(data, status, xhr) {
    		if(status === "success"){
				if(data.isduplicated){
					$('#friendly_url').addClass('input_error');
					$('#friendly_url').after('<span class="error">既に利用されています</span>');
					$('#friendly_url').focus();
				}
    		}
    	}).fail(function(xhr, status, error) {
    		console.log(xhr);
    	});
	});
 });

※サーバーサイドでは下記のようなJSONを作って返した想定です

{
	"isduplicated": true
}

Comments

[Romay]

>入力欄のフォーカスアウトでイベントを発火で入力値を取得
>取得できた＝使われている　取得できない＝使われていない　として、Ajaxのレスポンスとする
大変勉強になりました！
DB問い合わせの箇所について少し質問させてください。
https://localhost/something からユーザーがsomethingをaiueoに変えたいとします。
この場合、https://localhost/aiueo が存在するかどうか調べるのか、 friendly_urlのカラムにaiueoが存在するのかを調べるのかどちらなのでしょうか。
検索したいfriendly_urlカラムは、Userテーブルにあります。

[m.ts10806]

サーバーサイドの言語の基本としてはリクエストを受け取って処理を行うわけですからURLを叩いてレスポンスが返ってくるか確認することにあまり意味はありません。結局ブラウザからそのURLを実行した際にはaiueoというリクエストを受け取ってDBに問い合わせをしてから表示する情報を判断しているわけですよね？
で、あればDB問合せのみで対応しましょう。
情報をもとにURLが生成されるわけではなく、URLをもとに情報が決定します

[Romay]

なるほど、大変勉強になりました。色々試してみたもののうまくいってない部分もあり、またRailsのコードと関係してくるところもあるためこの投稿とは別に質問させていただきます。回答いただきありがとうございました。

[m.ts10806]

ヒントになったようで何よりです

Answer 2

ajaxでapiに対して所定のデータを投げて、その真偽で判断すればよいでしょう

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
  $('#check').on('click',function(){
    $.ajax({
    url:"api.txt",
    dataType:"json",
    data:{user:$('[name=user]').val()},
    cache:false,
    }).done(function(data){
      console.log(data);
      if(data) alert('そのurl名はすでに取得されています');
    });
  });
});
</script>
<input type="text" name="user" value="hoge">
<input type="button" value="check" id="check">

api.txtには"true"か"false"を記載してください
"true"とかけばalertを出します、"false"とかけばalertはでません。
あとはapi.txtのところをrubyでジャッジしてtrue/falseの文字を返すようにすればよいでしょう