Check username availability using jquery and Ajax in rails

Question

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

https://github.com/p

Answer 1

To check the Username/Email Availability do the following:

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

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

            "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 your routes.rb file to match the route you want to use, the default action with the call is a GET HTTP Request.

Next set up the proper action in your controller to handle the request (I included a helper in the Application Controller so that the input value can be sanitized before queried in the database:

CONTROLLER HANDLING THE 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 unsure of the proper INPUT ID, watch the server logs for the parameters passed during the call and do a simple copy-paste. By default the request passes the INPUT ID and INPUT VALUE.

To gain access to this helper add the following:

APPLICATION CONTROLLER

  def help
    Helper.instance
  end

  class Helper
    include Singleton
    include ActionView::Helpers::TextHelper
  end

Now on the form itself, your input should read as the following:

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

As per the proper functionality always place the AJAX call as the last validation.

Don't forget to include jquery.js, jquery.validationEngine-en.js, jquery.validationEngine.js and validationEngine.jquery.css in the head of the document [in that order of js] and to call a

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