Check username availability with jquery and Ajax in rails

Question

I use rails with jquery and ajax to check username availability. I am using the following plugin for the purpose of jQuery validation.

https://github.com/posabsolute/jQuery-Validation-Engine

In my controller, I use the following method to check for username availability.

def check_name name = params[:name] if name.strip == "" render :json => { :available => false } return end user = User.find(:first, :conditions => [ "name = ?", name]) if user render :json => ["name", false , "This name is already taken"] else render :json => ["name", true , ""] end end 

Is this the right way to write a method? I checked many of the username features of posts in this forum, but nothing worked.

Answer 1

I am adding an answer. Sorry for the delay guys.

The first credit for the plugin: https://github.com/posabsolute/jQuery-Validation-Engine . The plugin is used for verification in the application.

In the view I had

 <%= f.username_field :username, :id => 'free-user', :placeholder=>'User Name', :class => "validate[required, ajax[ajaxUserCall]]", "data-prompt-position" => "topLeft:0,9"%> 

In the same view in java script:

 <script type="text/javascript"> $(document).ready(function(){ $("#free-user").bind("jqv.field.result", function(event, field, errorFound, prompText){ if(errorFound){ $(".continue").attr("disabled", false); // .continue is a button } else{ $(".continue").attr("disabled", true); } }) }); </script> 

In route.rb, I have the following route.

 match '/check-user' =>"users#check_user" // creating route for ajax call 

In the jquery.validationEngine-en.js file, I have the following:

 "ajaxUserCall": { "url": "/check-user", // you may want to pass extra data on the ajax call "alertText": "* This user is already taken", "alertTextLoad": "* Validating, please wait" }, 

In the user controller, I have the following method

 def check_user user = params[:fieldValue] user = User.where("username = ?", username).first if user.present? render :json => ["free-user", false , "This User is already taken"] else render :json => ["free-user", true , ""] end end 

Answer 2

To verify username and email availability, follow these steps:

Using https://github.com/posabsolute/jQuery-Validation-Engine

edit the validationsEngines-en.js file for AJAX calls, one for the email message will look like this:

  "ajaxEmailAvailable": { "url": "/route_to_send_the_parameters", // you may want to pass extra data on the ajax call "alertTextOk": "* This email is available", "alertText": "* This email is already taken", "alertTextLoad": "* Validating, please wait" }, 

Make sure you configure the route.rb file according to the route you want to use, the default action with the call is the HTTP GET request.

Then configure the correct action in your controller to process the request (I included an assistant in the Application Controller so that the input value can be sanitized before the request in the database:

CONTROLLER, PLEASE REQUEST

  def username_availability scrubb = help.sanitize(params[:fieldValue], :tags => '') user = User.find_by_email(scrubb) if user.blank? render :json => ["INPUT_ID", true , ""] else render :json => ["INPUT_ID", false , "This email is already taken"] end end 

If you are not sure of the correct INPUT ID, monitor the server logs for the parameters passed during the call and make a simple copy-paste. By default, the query passes the INPUT ID and INPUT VALUE identifiers.

To access this assistant, add the following:

CONTROLLER APPLICATIONS

  def help Helper.instance end class Helper include Singleton include ActionView::Helpers::TextHelper end 

Now in the form itself, your input should look like this:

 <%= c.text_field :email, "data-validation-engine"=>"validate[required, custom[email], ajax[ajaxEmailAvailable]]" %> 

For proper functionality, always put an AJAX call as your final check.

Remember to include jquery.js, jquery.validationEngine-en.js, jquery.validationEngine.js and validationEngine.jquery.css at the beginning of the document [in this js order] and call

 <script type="text/javascript">$(function() {$("#FORM_ID").validationEngine();});</script> 

If you want to do this for the username, simply edit the above.