Added front-end validation to the contact form. Backend would be nice…

…, as would Mollom validation.

controls.rb

@@ -86,6 +86,7 @@ def method_missing(name)
   feed = Crack::XML.parse(xml).feed
   @posts = feed.entry
 
+  #make work when offline, give an error
 
   haml :thoughts
 end
@@ -103,24 +104,20 @@ def method_missing(name)
 end
 
 post "/contact" do
-  smtp_options = { :address => 'smtp.sendgrid.net',
-    :port => '25',
-    :authentication => :plain,
-    :user => ENV['SENDGRID_USERNAME'],
-    :password => ENV['SENDGRID_PASSWORD'],
-    :domain => ENV['SENDGRID_DOMAIN']
-  }
-  mail_options = { :to => 'chad.ostrowski@gmail.com',
+  #form validation in Sinatra?
+  #put it here!
+  Pony.mail :to => 'chad.ostrowski@gmail.com',
     :from => '"' + params[:name] + '" <' + params[:email] + '>',
     :body => params[:message],
     :subject => "Mail from Lisli.net!",
     :via => :smtp,
-    :via_options => smtp_options
-  }
-  puts mail_options.keys
-  puts smtp_options.keys
-  Pony.mail mail_options
-
+    :via_options => { :address => 'smtp.sendgrid.net',
+      :port => '25',
+      :authentication => :plain,
+      :user => ENV['SENDGRID_USERNAME'],
+      :password => ENV['SENDGRID_PASSWORD'],
+      :domain => ENV['SENDGRID_DOMAIN']
+    }
   flash.now[:notice] = "Thanks for your message! I'll get back to you soon."
   haml :contact
 end

public/javascripts/validation.js

@@ -0,0 +1,20 @@
+$(function() {
+
+  $("form").validate({
+    debug: true,
+    messages: {
+      email: {
+        required: "I need your email address, please!",
+        email: "I need your <em>full</em> email address, like name@example.com"
+      },
+      message: "I know you can muster something more interesting!"
+    },
+    highlight: function(element, errorClass, validClass) {
+      $(element).addClass(errorClass).removeClass(validClass);
+    },
+    unhighlight: function(element, errorClass, validClass) {
+      $(element).removeClass(errorClass).addClass(validClass);
+    }
+  });
+
+});

views/contact.haml

@@ -1,9 +1,19 @@
+- content_for :validation do
+  %script(type="text/javascript" src="javascripts/jquery-1.4.2.min.js")
+  %script(type="text/javascript" src="javascripts/jquery.validate.min.js")
+  %script(type="text/javascript" src="javascripts/validation.js")
 %h2 Contact Me
 %form{ :name => "contact_me", :id => "contact_me", :action => "/contact", :method => "post" }
   %label{ :for => "name" } Your name
   %input{ :name => "name", :id => "name", :type => "text" }
+  %br
+  %br
   %label{ :for => "email" } Your email address
-  %input{ :name => "email", :id => "email", :type => "text" }
+  %input.required.email{ :name => "email", :id => "email", :type => "text" }
+  %br
+  %br
   %label{ :for => "message" } Your message to me
-  %textarea{ :name => "message", :id => "message" }
+  %textarea.required{ :name => "message", :id => "message", :minlength => "10" }
+  %br
+  %br
   %input{ :type => "submit", :value => "Send" }

views/layout.haml

@@ -5,11 +5,11 @@
     %title Lisli
     %link(rel="stylesheet" type="text/css" href="/styles.css")
     %link(rel="shortcut icon" href="images/favicon.ico")
+    =yield_content :validation
   %body
     #header
       %h1#blog-title Lisli
       %p#description
-
     #nav
       %ul
         %li
@@ -38,5 +38,5 @@
             =haml :previous_posts, :layout => false
             =haml :archives, :layout => false
           =yield_content :subscribe
-  #footer
-    %p
+    #footer
+      %p

views/styles.sass

@@ -87,6 +87,9 @@ a
 div
   display: block
 
+div.feedback
+  display: none
+
 #blog-title
   border: solid #eee
   border-width: 1px 1px 0px
@@ -306,10 +309,21 @@ input[type="text"], textarea
   padding: 7px
   display: block
   font: large Georgia, serif
-  margin: 2px 0 37px
+  margin: 2px 0 10px
 textarea
   height: 150px
 
+input.error, textarea.error
+  background: #fed
+
+label.error[generated=true]
+  background: #fff
+  color: #c60
+  padding: 0
+  -webkit-box-shadow: none
+  -moz-box-shado: none
+  box-shadow: none
+
 input[type="submit"]
   background-color: #666
   padding: 6px 12px
@@ -332,13 +346,14 @@ input[type="submit"]
 input[type="text"], textarea, #notice, label
   -webkit-box-shadow: 0 0 3px #999
   -moz-box-shadow: 0 0 3px #999
+  box-shadoh: 0 0 3px #999
 
 #notice
-  background: #ffe099
+  background: #fed
   border: 2px solid #c60
   margin: 0 0 20px
   padding: 10px
   text-align: center
 
 ::selection
-  background: #ffe099
+  background: #fed