<%= 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>