danbarber/danbarberphoto
1
0
Fork 0
mirror of https://github.com/danbee/danbarberphoto synced 2025-03-04 08:49:07 +00:00
Code Issues Releases Wiki Activity

Added jQuery validation on the contact form via jquery.validate.

Browse Source
This commit is contained in:
Dan Barber 2010-10-14 14:38:10 -04:00
parent 5c4e32756b
commit 3183974820
13 changed files with 201 additions and 127 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gemfile
View File

@ -30,6 +30,7 @@ gem 'sqlite3-ruby', :require => 'sqlite3'
# end # end
gem "exception_notification", :git => "git://github.com/rails/exception_notification", :require => 'exception_notifier' gem "exception_notification", :git => "git://github.com/rails/exception_notification", :require => 'exception_notifier'
gem 'validates_email_format_of', :git => 'http://github.com/alexdunae/validates_email_format_of.git'
gem 'pg' gem 'pg'
gem 'typus', :git => 'git://github.com/fesplugas/typus.git' gem 'typus', :git => 'git://github.com/fesplugas/typus.git'
gem 'mini_exiftool' gem 'mini_exiftool'

7
Gemfile.lock
View File

@ -10,6 +10,12 @@ GIT
specs: specs:
exception_notification (1.0.0) exception_notification (1.0.0)
GIT
remote: http://github.com/alexdunae/validates_email_format_of.git
revision: 39750a7462028c25c387074744eee4b01d09f5a5
specs:
validates_email_format_of (1.4.1)
GIT GIT
remote: http://github.com/mislav/will_paginate.git remote: http://github.com/mislav/will_paginate.git
revision: b1a5beeec9f56ecbe3594fcdca76d92b6767ce50 revision: b1a5beeec9f56ecbe3594fcdca76d92b6767ce50
@ -98,4 +104,5 @@ DEPENDENCIES
rdiscount rdiscount
sqlite3-ruby sqlite3-ruby
typus! typus!
validates_email_format_of!
will_paginate! will_paginate!

BIN
app/models/.photo.rb.un~
View File

Binary file not shown.

5
app/models/contact.rb
View File

@ -1,8 +1,12 @@
require 'email_validator'
class Contact class Contact
include ActiveModel::Validations include ActiveModel::Validations
validates_presence_of :email, :name, :message validates_presence_of :email, :name, :message
validates :email, :email => true
attr_accessor :id, :email, :subject, :name, :message attr_accessor :id, :email, :subject, :name, :message
def initialize(attributes = {}) def initialize(attributes = {})
@ -23,4 +27,5 @@ class Contact
end end
return false return false
end end
end end

2
app/views/contacts/new.html.erb
View File

@ -7,7 +7,7 @@
</div> </div>
<div class="sg-17 contact-form"> <div class="sg-17 contact-form">
<%= form_for :contact, :url => { :action => 'create' } do |f| %> <%= form_for :contact, :url => { :action => 'create' }, :html => { :id => 'contact_form' } do |f| %>
<% if flash[:notice] -%> <% if flash[:notice] -%>
<div id="notice"><%= flash[:notice] %></div> <div id="notice"><%= flash[:notice] %></div>
<% end -%> <% end -%>

BIN
app/views/layouts/.photos.html.erb.un~
View File

Binary file not shown.

2
app/views/layouts/photos.html.erb
View File

@ -6,7 +6,7 @@
<%= stylesheet_link_tag "squaregrid", :media => "all" %> <%= stylesheet_link_tag "squaregrid", :media => "all" %>
<%= stylesheet_link_tag "photos", :media => "all" %> <%= stylesheet_link_tag "photos", :media => "all" %>
<%= stylesheet_link_tag "fancybox", :media => "all" %> <%= stylesheet_link_tag "fancybox", :media => "all" %>
<%= javascript_include_tag 'jquery', 'jrails', 'fancybox', 'photos' %> <%= javascript_include_tag 'jquery', 'jquery.validate', 'jrails', 'fancybox', 'photos' %>
</head> </head>
<body> <body>

10
lib/email_validator.rb Normal file
View File

@ -0,0 +1,10 @@
# lib/email_validator.rb
class EmailValidator < ActiveModel::EachValidator
def validate_each(object, attribute, value)
unless value =~ /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i
object.errors[attribute] << (options[:message] || "is not valid")
end
end
end

BIN
public/javascripts/.photos.js.un~
View File

Binary file not shown.

16
public/javascripts/jquery.validate.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

20
public/javascripts/photos.js
View File

@ -2,4 +2,24 @@ $(document).ready(function() {
$('.fancy').fancybox({ $('.fancy').fancybox({
'titlePosition' : 'inside' 'titlePosition' : 'inside'
}); });
if ($('#contact_form').length) {
$('#contact_form').validate({
rules: {
'contact[name]': "required",
'contact[email]': {
required: true,
email: true
},
'contact[message]': "required",
},
messages: {
'contact[email]': {
email: "Invalid email address."
}
}
});
console.info('Validation set.');
}
}); });

BIN
public/stylesheets/.photos.css.un~
View File

Binary file not shown.

261
public/stylesheets/photos.css
View File

@ -3,23 +3,23 @@ body {
color: white; color: white;
font-family: "Helvetica Neue", "Arial", "Helvatica", sans-serif; font-family: "Helvetica Neue", "Arial", "Helvatica", sans-serif;
font-size: 14px; font-size: 14px;
overflow: hidden; overflow: hidden;
} }
a { a {
text-decoration: none; text-decoration: none;
} }
p a { p a {
display: inline !important; display: inline !important;
color: #acf; color: #acf;
} }
p a:hover { p a:hover {
color: #fff; color: #fff;
} }
#page { #page {
position: absolute; position: absolute;
top: 40%; top: 40%;
margin-top: -230px; margin-top: -230px;
width: 100%; width: 100%;
} }
#container { #container {
padding-top: 20px; padding-top: 20px;
@ -33,12 +33,12 @@ p a:hover {
height: 308px; height: 308px;
} }
#header a { #header a {
display: block; display: block;
height: 308px; height: 308px;
width: 308px; width: 308px;
} }
#header a:hover { #header a:hover {
background: rgba(255,255,255,0.1); background: rgba(255,255,255,0.1);
} }
#header img { #header img {
padding: 0; padding: 0;
@ -48,215 +48,230 @@ p a:hover {
right: 20px; right: 20px;
} }
#footer { #footer {
background: #333; background: #333;
color: black; color: black;
text-align: right; text-align: right;
height: 28px; height: 28px;
} }
#footer p { #footer p {
margin: 0 10px; margin: 0 10px;
} }
.sg-5, .sg-7, .sg-11, .sg-17, .sg-35 { .sg-5, .sg-7, .sg-11, .sg-17, .sg-35 {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
} }
.sg-5 a, .sg-7 a, .sg-11 a, .sg-17 a, .sg-35 { .sg-5 a, .sg-7 a, .sg-11 a, .sg-17 a, .sg-35 {
-moz-border-radius: 2px; -moz-border-radius: 2px;
-webkit-border-radius: 2px; -webkit-border-radius: 2px;
border-radius: 2px; border-radius: 2px;
} }
.sg-5 { .sg-5 {
height: 140px; height: 140px;
} }
.sg-5 a { .sg-5 a {
position: relative; position: relative;
display: block; display: block;
color: white; color: white;
height: 140px; height: 140px;
width: 140px; width: 140px;
} }
.sg-7 { .sg-7 {
height: 196px; height: 196px;
} }
.sg-7 a { .sg-7 a {
position: relative; position: relative;
display: block; display: block;
color: white; color: white;
height: 196px; height: 196px;
width: 196px; width: 196px;
} }
.sg-11 { .sg-11 {
height: 308px; height: 308px;
} }
.sg-11 a { .sg-11 a {
display: block; display: block;
height: 308px; height: 308px;
width: 308px; width: 308px;
} }
.sg-17 { .sg-17 {
height: 476px; height: 476px;
} }
.sg-17 a { .sg-17 a {
display: block; display: block;
width: 476px; width: 476px;
height: 476px; height: 476px;
} }
.about { .about {
background-color: #99BF00; background-color: #99BF00;
} }
.portfolio { .portfolio {
background-color: #C03232; background-color: #C03232;
} }
.contact { .contact {
background-color: #777; background-color: #777;
} }
.about a:focus, .portfolio a:focus, .contact a:focus { .about a:focus, .portfolio a:focus, .contact a:focus {
background: rgba(255,255,255,0.1); background: rgba(255,255,255,0.1);
} }
.about a:hover, .portfolio a:hover, .contact a:hover { .about a:hover, .portfolio a:hover, .contact a:hover {
background: rgba(255,255,255,0.2); background: rgba(255,255,255,0.2);
} }
.about a span, .portfolio a span, .contact a span { .about a span, .portfolio a span, .contact a span {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 20px; right: 20px;
} }
.category { .category {
position: relative; position: relative;
} }
.category a, .photo a { .category a, .photo a {
display: block; display: block;
color: white; color: white;
text-decoration: none; text-decoration: none;
} }
.category a .arrow { .category a .arrow {
position: absolute; position: absolute;
font-size: 2em; font-size: 2em;
bottom: 20px; bottom: 20px;
left: 20px; left: 20px;
} }
.category a:focus, .photo a:focus { .category a:focus, .photo a:focus {
background: rgba(255,255,255,0.1); background: rgba(255,255,255,0.1);
} }
.category a:hover, .photo a:hover { .category a:hover, .photo a:hover {
background: rgba(255,255,255,0.2); background: rgba(255,255,255,0.2);
} }
.blank-category, .blank-photo { .blank-category, .blank-photo {
background: #222; background: #222;
outline: 1px dashed #444; outline: 1px dashed #444;
} }
.category h3 { .category h3 {
position: absolute; position: absolute;
top: 16px; top: 16px;
right: 0; right: 0;
text-align: right; text-align: right;
margin: 0 20px; margin: 0 20px;
font-weight: normal; font-weight: normal;
font-size: 1.1em; font-size: 1.1em;
line-height: 1em; line-height: 1em;
} }
img { img {
} }
.page-links { .page-links {
background: #666; background: #666;
} }
.prev-link, .next-link { .prev-link, .next-link {
color: white; color: white;
font-size: 2em; font-size: 2em;
position: relative; position: relative;
display: block; display: block;
} }
.prev-link div, .next-link div { .prev-link div, .next-link div {
position: absolute; position: absolute;
bottom: 15px; bottom: 15px;
} }
.prev-link div { .prev-link div {
left: 20px; left: 20px;
} }
.next-link div { .next-link div {
right: 20px; right: 20px;
} }
.prev-link:hover, .next-link:hover { .prev-link:hover, .next-link:hover {
background: rgba(255,255,255,0.2); background: rgba(255,255,255,0.2);
} }
.about-content { .about-content {
background: #444; background: #444;
color: #ccc; color: #ccc;
} }
.about-content div { .about-content div {
padding: 15px 20px; padding: 15px 20px;
} }
.about-content div p { .about-content div p {
margin-bottom: 0.6em; margin-bottom: 0.6em;
line-height: 1.4em; line-height: 1.4em;
} }
/* FORM */ /* FORM */
.contact-form { .contact-form {
background: #ddd; background: #ddd;
} }
.field_with_errors { .field_with_errors {
display: inline; display: inline;
} }
form { form {
padding: 10px 20px; padding: 10px 25px;
} }
form p { form p {
margin: 10px 0; margin: 10px 0;
} }
form p { form p {
color: #555; color: #555;
} }
form label { form label {
color: #666; color: #666;
display: block; display: block;
width: 100px; width: 75px;
float: left; float: left;
}
form label.error {
float: none;
display: inline;
color: #990000;
margin-left: 10px;
} }
form textarea { form textarea {
height: 150px; height: 150px;
width: 315px; width: 335px;
} }
form textarea, form input[type='text'] { form textarea, form input[type='text'] {
font-family:"Helvetica Neue","Arial","Helvatica",sans-serif; font-family:"Helvetica Neue","Arial","Helvatica",sans-serif;
font-size:14px; font-size:14px;
padding: 3px; padding: 3px;
color: #333; color: #333;
border: 2px solid #999; border: 2px solid #999;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
}
form input#contact_name {
width: 175px;
}
form input#contact_email {
width: 175px;
}
form input#contact_subject {
width: 335px;
} }
#alert { #alert {
background: #fffeef; background: #fffeef;
color: #664400; color: #664400;
border-width: 2px 0; border-width: 2px 0;
border-style: solid; border-style: solid;
border-color: #996600; border-color: #996600;
padding: 0 10px 2px; padding: 0 10px 2px;
margin-top: 15px; margin-top: 15px;
} }
#notice { #notice {
background: #efffef; background: #efffef;
color: #446600; color: #446600;
border-width: 2px 0; border-width: 2px 0;
border-style: solid; border-style: solid;
border-color: #669900; border-color: #669900;
padding: 0 10px 2px; padding: 0 10px 2px;
margin-top: 15px; margin-top: 15px;
} }
.field_with_errors input, .field_with_errors textarea { .field_with_errors input, .field_with_errors textarea, input.error, textarea.error {
background: #ffefef; background: #ffefef;
border-color: #cc3333 !important; border-color: #cc3333 !important;
} }
form input[type='submit'] { form input[type='submit'] {
background: #666; background: #666;
font-family:"Helvetica Neue","Arial","Helvatica",sans-serif; font-family:"Helvetica Neue","Arial","Helvatica",sans-serif;
font-size:14px; font-size:14px;
padding: 3px; padding: 3px;
color: white; color: white;
border: 2px solid #333; border: 2px solid #333;
-moz-border-radius: 3px; -moz-border-radius: 3px;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
} }