Start on validations for front create

app.rb

@@ -464,6 +464,25 @@ get '/new' do
   erb :'new'
 end
 
+post '/create_validate' do
+  content_type :json
+
+  if !params[:field].match /username|password|email|new_tags_string/
+    return {error: 'not a valid field'}.to_json
+  end
+
+  site = Site.new(params[:field] => params[:value])
+  site.valid?
+
+  field_sym = params[:field].to_sym
+
+  if site.errors[field_sym]
+    return {error: site.errors[field_sym].first}.to_json
+  end
+
+  {result: 'ok'}.to_json
+end
+
 post '/create' do
   require_unbanned_ip
   dashboard_if_signed_in

models/site.rb

@@ -646,13 +646,15 @@ class Site < Sequel::Model
       errors.add :username, 'A valid user/site name is required.'
     end
 
-    # TODO regex fails for usernames <= 2 chars, tempfix for now.
+    if new? && !values[:username].nil? && !values[:username].empty?
-    if new? && values[:username].length > 2 && !values[:username].match(VALID_HOSTNAME)
+      # TODO regex fails for usernames <= 2 chars, tempfix for now.
-      errors.add :username, 'A valid user/site name is required.'
+      if new? && values[:username].nil? || (values[:username].length > 2 && !values[:username].match(VALID_HOSTNAME))
-    end
+        errors.add :username, 'A valid user/site name is required.'
+      end
 
-    if values[:username].length > 32
+      if values[:username].length > 32
-      errors.add :username, 'User/site name cannot exceed 32 characters.'
+        errors.add :username, 'User/site name cannot exceed 32 characters.'
+      end
     end
 
     # Check that email has been provided

views/index.erb

@@ -154,27 +154,26 @@
               <a href="/dashboard" class="btn-Action">Get Started</a>
             </div>
         </div>
-
       <% else %>
         <form action="/new" method="get" class="signup-Form">
           <fieldset class="content">
             <h2 class="gamma">Sign up for free</h2>
             <hr />
             <label for="create-Input">Username</label>
-            <input type="text" class="input-Area" id="create-Input" name="username" placeholder="my-site-name" />
+            <input type="text" class="input-Area" id="create-Input" name="username" placeholder="my-site-name" data-placement="left" data-trigger="manual" />
             <label for="create-Input" id="domain-name">.neocities.org</label>
 
             <label for="tags-input">Tags (your interests, site topics)</label>
-            <input type="text" class="input-Area" id="tags-input" name="tags" placeholder="art, videogames, food, music, programming, gardening, cats" />
+            <input type="text" class="input-Area" id="tags-input" name="new_tags_string" placeholder="art, videogames, food, music, programming, gardening, cats" data-placement="left" data-trigger="manual" />
 
             <div class="col col-50" style="padding-left:0;">
             <label for="password-input">Password</label>
-            <input type="text" class="input-Area" id="password-input" name="password" placeholder="password" />
+            <input type="text" class="input-Area" id="password-input" name="password" placeholder="password" data-placement="left" data-trigger="manual" />
             </div>
 
             <div class="col col-50">
             <label for="email-input">Email</label>
-            <input type="text" class="input-Area" id="email-input" name="email" placeholder="me@example.com" />
+            <input type="text" class="input-Area" id="email-input" name="email" placeholder="me@example.com" data-placement="left" data-trigger="manual" />
             </div>
 
             <input type="submit" value="Create My Site" class="btn-Action float-Right" />
@@ -334,5 +333,16 @@
     </div>
     <script src="/js/app.min.js"></script>
     <script src="/js/bootstrap.min.js"></script>
+    <script>
+      $('input[type=text]').change(function(obj) {
+        $.post('/create_validate', {field: obj.target.name, value: obj.target.value, csrf_token: '<%= csrf_token %>'}, function(res) {
+          if(res.result == 'ok') {
+            return $(obj.target).tooltip('hide')
+          }
+          $(obj.target).attr('data-original-title', res.error)
+          $(obj.target).tooltip('show')
+        })
+      })
+    </script>
   </body>
 </html>