Use tidy-html5 to validate the home page

public/javascript/main.js

@@ -461,15 +461,25 @@ $(function(){
   });
 
   // http://baymard.com/labs/country-selector
-  $('.js-select-to-autocomplete').selectToAutocomplete().on('change', function(){
-    var v = $(this).val();
-    if (v) {
-      // Assumes the <option>'s `value` attribute is a URL slug for the country
-      window.location.href = '/' + v + '/';
-    }
-  }).on('focus', function(){
-    $(this).next().trigger("focus");
-  });
+  var $placeholder = $('#js-placeholder');
+  $('.js-select-to-autocomplete')
+    .attr({
+      placeholder:  $placeholder.text(),
+      autocorrect:  'off',
+      autocomplete: 'off'
+    })
+    .selectToAutocomplete()
+    .on('change', function(){
+      var v = $(this).val();
+      if (v) {
+        // Assumes the <option>'s `value` attribute is a URL slug for the country
+        window.location.href = '/' + v + '/';
+      }
+    })
+    .on('focus', function(){
+      $(this).next().trigger("focus");
+    });
+  $placeholder.attr('class', 'hidden')
 
   // Fix the incorrect default autocomplete width, which meant that
   // autocomplete menu was longer than the search input it's linked to.

t/web/basic.rb

@@ -66,4 +66,12 @@
       last_response.status.must_equal 404
     end
   end
+
+  describe 'HTML validation' do
+    before { get '/' }
+
+    it 'has no errors in the home page' do
+      last_response_must_be_valid
+    end
+  end
 end

views/country_selector.erb

@@ -1,4 +1,4 @@
-<select class="field js-select-to-autocomplete" placeholder="Search by country name" name="Country" id="country-selector" autofocus="autofocus" autocorrect="off" autocomplete="off">
+<select class="field js-select-to-autocomplete" name="Country" id="country-selector" autofocus="autofocus">
     <option value="" selected="selected">Select Country</option>
   <% @page.all_countries.each do |country| %>
     <option value="<%= country.slug %>" data-alternative-spellings="<%= country.names %>" title="<%= commify(country.total_people) %> <% if country.total_people == 1 %>person<% else %>people<% end %>"><%= country.name %></option>

views/homepage.erb

@@ -1,7 +1,12 @@
 <div class="hero hero--jazzy text-center homepage-hero">
     <div class="container">
         <h1><%= commify(@page.total_people) %> politicians from <a href="/countries.html"><%= @page.countries_with_data.count %> countries</a> (so far)</h1>
-        <p><label for="country-selector">Find representatives from your country:</label></p>
+        <p>
+          <label for="country-selector">
+            Find representatives from your country:
+            <span id="js-placeholder">Search by country name</span>
+          </label>
+        </p>
         <%= erb :country_selector %>
     </div>
     <div class="homepage-map"></div>