orbit-basic/app/views/devise/registrations/new.html.erb

<%= stylesheet_link_tag "sign_up" %>
<section id="main-wrap">
	<div class="sign-up have-other-sign-in">

		<% flash.each do |key, msg| %>
			<%= content_tag :p, msg, :class => [key, "alert alert-error in fade"] %>
		<% end %>

		<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 resource, :as => resource_name, :url => registration_path(resource_name), :html => {:class => 'content form-horizontal'} do |f| %>
						<div class="control-group clear">
							<label class="control-label" for="user_email">User ID</label>
							<div class="controls">
								<%= f.text_field :user_id, :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">Email</label>
							<div class="controls">
								<%= f.email_field :email, :placeholder => t("users.email"), :id=>"user_email", :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 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">
							<%= content_tag :button, t(:register), :type => :submit, :class => 'btn btn-primary' %>
						</div>
						<div class="pull-left links">
							<%= render :partial => "devise/shared/links" %>
						</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 : "<%= basic_infos_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>