mirror of
https://github.com/danbee/danbarberphoto
synced 2025-03-04 08:49:07 +00:00
Added jQuery validation on the contact form via jquery.validate.
This commit is contained in:
Dan Barber
parent
5c4e32756b
commit
3183974820
1
Gemfile
1
Gemfile
@ -30,6 +30,7 @@ gem 'sqlite3-ruby', :require => 'sqlite3'
|
||||
# end
|
||||
|
||||
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 'typus', :git => 'git://github.com/fesplugas/typus.git'
|
||||
gem 'mini_exiftool'
|
||||
|
||||
@ -10,6 +10,12 @@ GIT
|
||||
specs:
|
||||
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
|
||||
remote: http://github.com/mislav/will_paginate.git
|
||||
revision: b1a5beeec9f56ecbe3594fcdca76d92b6767ce50
|
||||
@ -98,4 +104,5 @@ DEPENDENCIES
|
||||
rdiscount
|
||||
sqlite3-ruby
|
||||
typus!
|
||||
validates_email_format_of!
|
||||
will_paginate!
|
||||
|
||||
Binary file not shown.
@ -1,8 +1,12 @@
|
||||
require 'email_validator'
|
||||
|
||||
class Contact
|
||||
include ActiveModel::Validations
|
||||
|
||||
validates_presence_of :email, :name, :message
|
||||
|
||||
validates :email, :email => true
|
||||
|
||||
attr_accessor :id, :email, :subject, :name, :message
|
||||
|
||||
def initialize(attributes = {})
|
||||
@ -23,4 +27,5 @@ class Contact
|
||||
end
|
||||
return false
|
||||
end
|
||||
|
||||
end
|
||||
|
||||
@ -7,7 +7,7 @@
|
||||
</div>
|
||||
|
||||
<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] -%>
|
||||
<div id="notice"><%= flash[:notice] %></div>
|
||||
<% end -%>
|
||||
|
||||
Binary file not shown.
@ -6,7 +6,7 @@
|
||||
<%= stylesheet_link_tag "squaregrid", :media => "all" %>
|
||||
<%= stylesheet_link_tag "photos", :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>
|
||||
|
||||
<body>
|
||||
|
||||
10
lib/email_validator.rb
Normal file
10
lib/email_validator.rb
Normal 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
|
||||
Binary file not shown.
16
public/javascripts/jquery.validate.js
vendored
Normal file
16
public/javascripts/jquery.validate.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@ -2,4 +2,24 @@ $(document).ready(function() {
|
||||
$('.fancy').fancybox({
|
||||
'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.');
|
||||
}
|
||||
});
|
||||
|
||||
Binary file not shown.
@ -3,23 +3,23 @@ body {
|
||||
color: white;
|
||||
font-family: "Helvetica Neue", "Arial", "Helvatica", sans-serif;
|
||||
font-size: 14px;
|
||||
overflow: hidden;
|
||||
overflow: hidden;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
}
|
||||
p a {
|
||||
display: inline !important;
|
||||
color: #acf;
|
||||
display: inline !important;
|
||||
color: #acf;
|
||||
}
|
||||
p a:hover {
|
||||
color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
#page {
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
margin-top: -230px;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 40%;
|
||||
margin-top: -230px;
|
||||
width: 100%;
|
||||
}
|
||||
#container {
|
||||
padding-top: 20px;
|
||||
@ -33,12 +33,12 @@ p a:hover {
|
||||
height: 308px;
|
||||
}
|
||||
#header a {
|
||||
display: block;
|
||||
height: 308px;
|
||||
width: 308px;
|
||||
display: block;
|
||||
height: 308px;
|
||||
width: 308px;
|
||||
}
|
||||
#header a:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
#header img {
|
||||
padding: 0;
|
||||
@ -48,215 +48,230 @@ p a:hover {
|
||||
right: 20px;
|
||||
}
|
||||
#footer {
|
||||
background: #333;
|
||||
color: black;
|
||||
text-align: right;
|
||||
height: 28px;
|
||||
background: #333;
|
||||
color: black;
|
||||
text-align: right;
|
||||
height: 28px;
|
||||
}
|
||||
#footer p {
|
||||
margin: 0 10px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
.sg-5, .sg-7, .sg-11, .sg-17, .sg-35 {
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.sg-5 a, .sg-7 a, .sg-11 a, .sg-17 a, .sg-35 {
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.sg-5 {
|
||||
height: 140px;
|
||||
}
|
||||
.sg-5 a {
|
||||
position: relative;
|
||||
display: block;
|
||||
color: white;
|
||||
height: 140px;
|
||||
width: 140px;
|
||||
position: relative;
|
||||
display: block;
|
||||
color: white;
|
||||
height: 140px;
|
||||
width: 140px;
|
||||
}
|
||||
.sg-7 {
|
||||
height: 196px;
|
||||
height: 196px;
|
||||
}
|
||||
.sg-7 a {
|
||||
position: relative;
|
||||
display: block;
|
||||
color: white;
|
||||
height: 196px;
|
||||
width: 196px;
|
||||
position: relative;
|
||||
display: block;
|
||||
color: white;
|
||||
height: 196px;
|
||||
width: 196px;
|
||||
}
|
||||
.sg-11 {
|
||||
height: 308px;
|
||||
height: 308px;
|
||||
}
|
||||
.sg-11 a {
|
||||
display: block;
|
||||
height: 308px;
|
||||
width: 308px;
|
||||
display: block;
|
||||
height: 308px;
|
||||
width: 308px;
|
||||
}
|
||||
.sg-17 {
|
||||
height: 476px;
|
||||
height: 476px;
|
||||
}
|
||||
.sg-17 a {
|
||||
display: block;
|
||||
width: 476px;
|
||||
height: 476px;
|
||||
display: block;
|
||||
width: 476px;
|
||||
height: 476px;
|
||||
}
|
||||
.about {
|
||||
background-color: #99BF00;
|
||||
background-color: #99BF00;
|
||||
}
|
||||
.portfolio {
|
||||
background-color: #C03232;
|
||||
background-color: #C03232;
|
||||
}
|
||||
.contact {
|
||||
background-color: #777;
|
||||
background-color: #777;
|
||||
}
|
||||
.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 {
|
||||
background: rgba(255,255,255,0.2);
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
.about a span, .portfolio a span, .contact a span {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 20px;
|
||||
}
|
||||
.category {
|
||||
position: relative;
|
||||
}
|
||||
.category a, .photo a {
|
||||
display: block;
|
||||
display: block;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
.category a .arrow {
|
||||
position: absolute;
|
||||
font-size: 2em;
|
||||
bottom: 20px;
|
||||
position: absolute;
|
||||
font-size: 2em;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
.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 {
|
||||
background: rgba(255,255,255,0.2);
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
.blank-category, .blank-photo {
|
||||
background: #222;
|
||||
outline: 1px dashed #444;
|
||||
}
|
||||
.category h3 {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
margin: 0 20px;
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 0;
|
||||
text-align: right;
|
||||
margin: 0 20px;
|
||||
font-weight: normal;
|
||||
font-size: 1.1em;
|
||||
line-height: 1em;
|
||||
line-height: 1em;
|
||||
}
|
||||
img {
|
||||
}
|
||||
.page-links {
|
||||
background: #666;
|
||||
background: #666;
|
||||
}
|
||||
.prev-link, .next-link {
|
||||
color: white;
|
||||
font-size: 2em;
|
||||
position: relative;
|
||||
display: block;
|
||||
color: white;
|
||||
font-size: 2em;
|
||||
position: relative;
|
||||
display: block;
|
||||
}
|
||||
.prev-link div, .next-link div {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
}
|
||||
.prev-link div {
|
||||
left: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
.next-link div {
|
||||
right: 20px;
|
||||
right: 20px;
|
||||
}
|
||||
.prev-link:hover, .next-link:hover {
|
||||
background: rgba(255,255,255,0.2);
|
||||
background: rgba(255,255,255,0.2);
|
||||
}
|
||||
.about-content {
|
||||
background: #444;
|
||||
color: #ccc;
|
||||
background: #444;
|
||||
color: #ccc;
|
||||
}
|
||||
.about-content div {
|
||||
padding: 15px 20px;
|
||||
padding: 15px 20px;
|
||||
}
|
||||
.about-content div p {
|
||||
margin-bottom: 0.6em;
|
||||
line-height: 1.4em;
|
||||
margin-bottom: 0.6em;
|
||||
line-height: 1.4em;
|
||||
}
|
||||
/* FORM */
|
||||
.contact-form {
|
||||
background: #ddd;
|
||||
background: #ddd;
|
||||
}
|
||||
.field_with_errors {
|
||||
display: inline;
|
||||
display: inline;
|
||||
}
|
||||
form {
|
||||
padding: 10px 20px;
|
||||
padding: 10px 25px;
|
||||
}
|
||||
form p {
|
||||
margin: 10px 0;
|
||||
margin: 10px 0;
|
||||
}
|
||||
form p {
|
||||
color: #555;
|
||||
color: #555;
|
||||
}
|
||||
form label {
|
||||
color: #666;
|
||||
display: block;
|
||||
width: 100px;
|
||||
float: left;
|
||||
color: #666;
|
||||
display: block;
|
||||
width: 75px;
|
||||
float: left;
|
||||
}
|
||||
form label.error {
|
||||
float: none;
|
||||
display: inline;
|
||||
color: #990000;
|
||||
margin-left: 10px;
|
||||
}
|
||||
form textarea {
|
||||
height: 150px;
|
||||
width: 315px;
|
||||
height: 150px;
|
||||
width: 335px;
|
||||
}
|
||||
form textarea, form input[type='text'] {
|
||||
font-family:"Helvetica Neue","Arial","Helvatica",sans-serif;
|
||||
font-size:14px;
|
||||
padding: 3px;
|
||||
color: #333;
|
||||
border: 2px solid #999;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
font-family:"Helvetica Neue","Arial","Helvatica",sans-serif;
|
||||
font-size:14px;
|
||||
padding: 3px;
|
||||
color: #333;
|
||||
border: 2px solid #999;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-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 {
|
||||
background: #fffeef;
|
||||
color: #664400;
|
||||
border-width: 2px 0;
|
||||
border-style: solid;
|
||||
border-color: #996600;
|
||||
padding: 0 10px 2px;
|
||||
margin-top: 15px;
|
||||
background: #fffeef;
|
||||
color: #664400;
|
||||
border-width: 2px 0;
|
||||
border-style: solid;
|
||||
border-color: #996600;
|
||||
padding: 0 10px 2px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
#notice {
|
||||
background: #efffef;
|
||||
color: #446600;
|
||||
border-width: 2px 0;
|
||||
border-style: solid;
|
||||
border-color: #669900;
|
||||
padding: 0 10px 2px;
|
||||
margin-top: 15px;
|
||||
background: #efffef;
|
||||
color: #446600;
|
||||
border-width: 2px 0;
|
||||
border-style: solid;
|
||||
border-color: #669900;
|
||||
padding: 0 10px 2px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
.field_with_errors input, .field_with_errors textarea {
|
||||
background: #ffefef;
|
||||
border-color: #cc3333 !important;
|
||||
.field_with_errors input, .field_with_errors textarea, input.error, textarea.error {
|
||||
background: #ffefef;
|
||||
border-color: #cc3333 !important;
|
||||
}
|
||||
form input[type='submit'] {
|
||||
background: #666;
|
||||
font-family:"Helvetica Neue","Arial","Helvatica",sans-serif;
|
||||
font-size:14px;
|
||||
padding: 3px;
|
||||
color: white;
|
||||
border: 2px solid #333;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
background: #666;
|
||||
font-family:"Helvetica Neue","Arial","Helvatica",sans-serif;
|
||||
font-size:14px;
|
||||
padding: 3px;
|
||||
color: white;
|
||||
border: 2px solid #333;
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user