1
0
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 2010-10-14 14:38:10 -04:00
parent 5c4e32756b
commit 3183974820
13 changed files with 201 additions and 127 deletions

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'

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!

Binary file not shown.

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

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

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

Binary file not shown.

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

File diff suppressed because one or more lines are too long

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.');
}
}); });

Binary file not shown.

View File

@ -199,7 +199,7 @@ img {
display: inline; display: inline;
} }
form { form {
padding: 10px 20px; padding: 10px 25px;
} }
form p { form p {
margin: 10px 0; margin: 10px 0;
@ -210,12 +210,18 @@ form p {
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;
@ -227,6 +233,15 @@ form textarea, form input[type='text'] {
-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;
@ -245,7 +260,7 @@ form textarea, form input[type='text'] {
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;
} }