入力中にユーザー名が使用されているかどうかを確認するにはどうすればよいですか？

Question

多くの一般的なウェブサイトでは、入力された文字が既存のユーザーに対応するかどうかに基づいて、ユーザーが新しい文字を入力すると、通常は赤または青に変わるユーザー名フィールドがあります。

は、私は、次のユーザ名フィールドを持っていると言う：

<%= f.text_field :username, id:"username" %> 

その機能は、このフィールドに追加することができどのように？

Answer 1

textboxイベントでajaxリクエストを発砲しなければなりません。 関数を書き込んで、user_controllerをGET httpメソッドで追加して、あなたのユーザー名の確認に適切な応答を返します。

Answer 2

テキストボックスに書いている間にajaxリクエストをトリガーします。同様に：

$("#username").keyup(function() { 
    $.ajax({ 
     type: "GET", 
     url: '<%= username_availability_path %>', # replace by your route 
     data: {name: $('#username').prop('value')} 
    }); 
}); 

はタイプGETであなたのroutes.rbファイルにnewルートを作成します。このメソッドでは、params[:name]を使用して型付き名にアクセスし、存在するかどうかを確認します。それからあなたが望むものを何でもしてください。

Answer 3

代わりにユーザー名をチェックし、すべてのキーに要求を行うのは、ユーザーがユーザー名フィールドを離れると、ユーザー名を確認するためにblurメソッドを使用することができ、または他のあなたがkeyupを使用することができ、すべてのキーの上にそれを必要とします自体、

あなたのJavascript、

$("#username").keyup(function() { # you can also try, $("#username").blur(function() { 
    $.ajax({ 
     url: '<%= check_duplicate_username_path %>', # your own route 
     type: "GET", 
     data: { username: $('#username').val() }, // This goes to Controller in params hash, i.e. params[:username] 
     complete: function() {}, 
     success: function(data, textStatus, xhr) { 
        // do something with your returned data // 
        if (data.available == false) 
        { 
        $('#username').addClass("error"); // style the class with your required css 
        } 
       }, 
     error: function() { 
      alert("Your Ajax error! message") 
     } 
    }); 
}); 

ルートが

として撮影することができますコントローラのアクションは、のようなものにすることができます

、

def check_duplicate_username 
     @user = User.where('username = ?',params[:username]).first 
     if @user.present? 
     render json: {:success => 0, :message => 'User exists', :user_available => true} 
     else 
     render json: {:success => 1, :message => 'User Does not exist', :user_available => false} 
     end 
end