orbit4-5/app/views/users/new.html.erb

<section id="main-wrap">
  <div class="sign-up have-other-sign-in">
    <div class="form">
      <h3 class="login-logo">Sign up with Orbit</h3>
      <div class="form-block option-block">
        <div class="form-list clearfix">

          <%= form_for @user, :html => {:class => 'content form-horizontal'} do |f| %>

            <div class="control-group clear">
              <label class="control-label" for="user_email"><%= t("users.user_id") %></label>
              <div class="controls">
                <%= f.text_field :user_name, :placeholder => t("users.user_id"), :id=>"user_id",:class=>"availibility" %>
                <span class="loader hide"><img src="/assets/availability-check-loader.gif" /></span>
                <span class="notify not-ok hide alert alert-danger"><i class="icon-remove"></i>Not Available</span>
                <span class="notify ok alert hide alert-success"><i class="icon-ok"></i>Available</span>
              </div>
            </div>

            <div class="control-group clear">
              <label class="control-label" for="user_email"><%= t("user.first_name")%></label>
                <div class="controls">
                  <%= text_field_tag :first_name, "", id: "user_first_name", placeholder: t("users.first_name") %>
                  <span class="loader hide"><img src="/assets/availability-check-loader.gif" /></span>
                </div>
            </div>

            <div class="control-group clear">
              <label class="control-label" for="user_email"><%= t("user.last_name")%></label>
                <div class="controls">
                  <%= text_field_tag :last_name, "", id: "user_last_name", placeholder: t("users.last_name") %>
                  <span class="loader hide"><img src="/assets/availability-check-loader.gif" /></span>
                </div>
            </div>

            <div class="control-group clear">
              <label class="control-label" for="user_email"><%= t("user.email")%></label>
                <div class="controls">
                  <%= email_field_tag :email, "", class: "availibility", id: "user_email", placeholder: t("users.email") %>
                  <span class="loader hide"><img src="/assets/availability-check-loader.gif" /></span>
                   <span class="notify not-ok hide alert alert-danger"><i class="icon-remove"></i>Not Available</span>
                  <span class="notify ok hide alert alert-success"><i class="icon-ok"></i>Available</span>
                </div>
            </div>

            <div class="control-group clear">
              <label class="control-label" for="user_password">Password</label>
              <div class="controls">
                <%= f.password_field :password, :placeholder => t(:dots), :id=>"user_password" %>
              </div>
            </div>
            <div class="control-group clear">
              <label class="control-label" for="user_password">Confirm Password</label>
              <div class="controls">
                <%= f.password_field :password, :placeholder => t(:dots), :id=>"confirm_user_password" %>
              </div>
            </div>
            <h3 class="line"></h3>
            <div class="pull-right">
              <%= f.submit t(:register), :class => 'btn btn-primary' %>
            </div>
           
          <% end %>
          
        </div>
      </div>
    </div>

  </div>
</section>

<script type="text/javascript">
(function(){
  var validated = false;

  $("form.content").submit(function(event) {
    var form = $(this);
    form.find("input").removeClass('error');
    form.find("input[type=text], input[type=email], input[type=password]").each(function(){
      validated = $(this).val() ? true : false;
      if(!validated){
        return false;
      }
    })
    if(validated){
      form.find("span.not-ok").each(function(){
        validated = $(this).hasClass('hide') ? true : false;
        if(!validated)return false;
      })
    }
    if(validated){
      validated = form.find("input[type=password]:eq(0)").val() == form.find("input[type=password]:eq(1)").val() ? true : false;
      if(!validated){
        form.find("input[type=password]").addClass('error');
      }
    }
    if(!validated){
      return false;;
    }
  });

  $(".availibility").blur(function(){
    var type = $(this).attr("id"),
      loader = $(this).parent().find('.loader'),
      elem = $(this),
      value = $(this).val() || null;

    elem.parent().find("span").addClass('hide');

    var checkAvailability = function(){
      loader.removeClass('hide');
      elem.removeClass('error');
      $.ajax({
        url : "<%= users_check_availability_path %>",
        data : {"type" : type, "value" : value},
        dataType : "json",
        type : "get",
        success : function(data){
          loader.addClass('hide');
          if( data.success == true ){
            elem.parent().find(".ok").removeClass('hide');
          }else{
            elem.parent().find(".not-ok").removeClass('hide');
            elem.addClass('error');
          }
        }
      })
    }

    if( value ){
      if(type == "user_email" && validateEmail(value)){
        checkAvailability();
      }else if(type == "user_id"){
        checkAvailability();
      }else{
        elem.addClass('error');
      }
    }

    
  })
  var validateEmail = function(email) { 
      var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA -Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
      return re.test(email);
  } 
})();
</script>