Added validation

This commit is contained in:
Erik Michaels-Ober 2011-03-04 20:22:03 -08:00
parent 7810faaa63
commit 56de9ac888
4 changed files with 91 additions and 40 deletions

View File

@ -5,7 +5,7 @@
<%= stylesheet_link_tag "main" %>
<%= javascript_include_tag "http://maps.google.com/maps/api/js?sensor=false" %>
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" %>
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" %>
<%= javascript_include_tag "https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js" %>
<%= javascript_include_tag "https://github.com/scottschiller/Snowstorm/raw/master/snowstorm-min.js" %>
<script type="text/javascript">
$(function() {
@ -24,7 +24,7 @@
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var openInfoWindow;
var formString = '<%= render(:partial => "adoption_form").gsub("\n", "") %>'
var formString = '<%= render(:partial => "combo_form").gsub("\n", "") %>'
function addMarker(point, color, contentString) {
var image = new google.maps.MarkerImage(color,
new google.maps.Size(27.0, 37.0),
@ -50,6 +50,45 @@
openInfoWindow.close();
}
infoWindow.open(map, marker);
$('.combo_form').data('state', 'new');
$('.combo_form').submit(function() {
if($(this).data('state') === 'new') {
if($('.choose_password').val() === '') {
$('.choose_password').focus();
$('.choose_password_label').addClass('error', 500);
$('.choose_password').addClass('error', 500);
} else {
$('.choose_password_label').removeClass('error', 500);
$('.choose_password').removeClass('error', 500);
}
if($('.name').val() === '') {
$('.name').focus();
$('.name_label').addClass('error', 500);
$('.name').addClass('error', 500);
} else {
$('.name_label').removeClass('error', 500);
$('.name').removeClass('error', 500);
}
} else if($(this).data('state') === 'existing') {
if($('.password').val() === '') {
$('.password').focus();
$('.password_label').addClass('error', 500);
$('.password').addClass('error', 500);
} else {
$('.password_label').removeClass('error', 500);
$('.password').removeClass('error', 500);
}
}
if(!/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]+$/.test($('.email').val())) {
$('.email').focus();
$('.email_label').addClass('error', 500);
$('.email').addClass('error', 500);
} else {
$('.email_label').removeClass('error', 500);
$('.email').removeClass('error', 500);
}
return false;
});
openInfoWindow = infoWindow;
});
}
@ -64,10 +103,10 @@
addMarker(point, color, contentString);
<% end %>
$('#location_form').submit(function() {
if($("#address").val() === "") {
if($('#address').val() === '') {
$('#address').focus();
$('#address_label').addClass('error', 500);
$('#address').addClass('error', 500);
$('#address').focus();
return false;
} else {
return true;
@ -79,17 +118,21 @@
$('.forgot_password_fields').slideUp();
$('.account_existing_fields').slideUp();
$('.account_new_fields').slideDown();
$('.combo_form').data('state', 'new');
} else if('existing' == self.val()) {
$('.account_new_fields').slideUp();
$('.account_existing_fields').slideDown(function() {
$('.combo_form').data('state', 'existing');
$('.forgot_password').click(function() {
$('.account_existing_fields').slideUp();
$('.forgot_password_fields').slideDown(function() {
$('.remembered_password').click(function() {
$('.forgot_password_fields').slideUp();
$('.account_existing_fields').slideDown();
$('.combo_form').data('state', 'existing');
});
});
$('.combo_form').data('state', 'forgot_password');
});
});
}

View File

@ -1,36 +0,0 @@
<div class="box">
<h2>Adopt this Hydrant</h2>
<%= form_tag do %>
<div class="common_fields">
<%= label_tag "email" %>
<%= text_field_tag "email", params[:email], :tabindex => 1 %>
<%= label_tag "account_new" , radio_button_tag("account", "new", true, :tabindex => 2).html_safe + "I haven\\'t signed up yet" %><br />
<%= label_tag "account_existing", radio_button_tag("account", "existing").html_safe + "I already signed up" %><br />
</div>
<div class="account_new_fields">
<%= label_tag "name" %>
<%= text_field_tag "name", params[:name], :tabindex => 3 %>
<%= label_tag "organization" %>
<%= text_field_tag "organization", params[:organization], :tabindex => 4 %>
<%= label_tag "voice_number" %>
<%= text_field_tag "voice_number", params[:voice_number], :tabindex => 5 %>
<%= label_tag "sms_number", "SMS number" %>
<%= text_field_tag "sms_number", params[:sms_number], :tabindex => 6 %>
<%= label_tag "password", "Choose a password" %>
<%= password_field_tag "password", nil, :tabindex => 7 %>
<%= submit_tag "Sign up", :tabindex => 8 %>
<p>By signing up you accept the <%= link_to "Terms of Service", "#", :tabindex => 9 %>.</p>
</div>
<div class="account_existing_fields" style="display: none;">
<%= label_tag "password" %>
<%= password_field_tag "password", nil, :tabindex => 0 %>
<%= label_tag "remember_me", check_box_tag("remember_me", nil, true).html_safe + "Stay signed in" %><br />
<%= submit_tag "Sign in", :tabindex => 0 %>
<p><%= link_to "Forgot your password?", "#", :class => "forgot_password", :tabindex => 0 %></p>
</div>
<div class="forgot_password_fields" style="display: none;">
<%= submit_tag "Email me my password", :tabindex => 0 %>
<p><%= link_to "Never mind. I remembered my password.", "#", :class => "remembered_password", :tabindex => 0 %></p>
</div>
<% end %>
</div>

View File

@ -0,0 +1,36 @@
<div class="box">
<h2>Adopt this Hydrant</h2>
<%= form_tag "#", :method => "GET", :class => "combo_form" do %>
<div class="common_fields">
<%= label_tag "email", "Email address", :class => "email_label" %>
<%= text_field_tag "email", nil, :tabindex => 1, :class => "email" %>
<%= label_tag "account_new" , radio_button_tag("account", "new", true, :tabindex => 2).html_safe + "I haven\\'t signed up yet" %><br />
<%= label_tag "account_existing", radio_button_tag("account", "existing").html_safe + "I already signed up" %><br />
</div>
<div class="account_new_fields">
<%= label_tag "name", "Name", :class => "name_label" %>
<%= text_field_tag "name", nil, :tabindex => 3, :class => "name" %>
<%= label_tag "organization", "Organization", :class => "organization_label" %>
<%= text_field_tag "organization", nil, :tabindex => 4, :class => "organization" %>
<%= label_tag "voice_number", "Phone number", :class => "voice_number_label" %>
<%= text_field_tag "voice_number", nil, :tabindex => 5, :class => "voice_number" %>
<%= label_tag "sms_number", "SMS number", :class => "sms_number_label" %>
<%= text_field_tag "sms_number", nil, :tabindex => 6, :class => "sms_number" %>
<%= label_tag "choose_password", "Choose a password", :class => "choose_password_label" %>
<%= password_field_tag "choose_password", nil, :tabindex => 7, :class => "choose_password" %>
<%= submit_tag "Sign up", :tabindex => 8 %>
<p>By signing up you accept the <%= link_to "Terms of Service", "#", :tabindex => 9 %>.</p>
</div>
<div class="account_existing_fields" style="display: none;">
<%= label_tag "password", "Password", :class => "password_label" %>
<%= password_field_tag "password", nil, :tabindex => 0, :class => "password" %>
<%= label_tag "remember_me", (check_box_tag("remember_me", nil, true).html_safe + "Stay signed in"), :class => "remember_me_label" %><br />
<%= submit_tag "Sign in", :tabindex => 0 %>
<p><%= link_to "Forgot your password?", "#", :class => "forgot_password", :tabindex => 0 %></p>
</div>
<div class="forgot_password_fields" style="display: none;">
<%= submit_tag "Email me my password", :tabindex => 0 %>
<p><%= link_to "Never mind. I remembered my password.", "#", :class => "remembered_password", :tabindex => 0 %></p>
</div>
<% end %>
</div>

View File

@ -73,3 +73,11 @@ button, input[type="submit"] {
width: 100%;
text-align: center;
}
label.error {
color: #c33;
}
input.error {
background-color: #fcc;
}