Add tag and category form validation

app/controllers/orbit_admin_controller.rb

@@ -34,8 +34,8 @@ class OrbitAdminController < ApplicationController
   def filter_fields(categories, tags)
     {
       :status=>[{:title=>"is_top",:id=>"is_top"},{:title=>"is_hot",:id=>"is_hot"},{:title=>"is_hidden",:id=>"is_hidden"}], 
-      :category=>categories.map{|c| {:title=>c.title, :id=>c.id}}, 
+      :category=>categories.map{|c| {:title=>(c.title.blank? ? " " : c.title), :id=>c.id}}, 
-      :tags=>tags.map{|tag| {:title=>tag.name, :id=>tag.id}} 
+      :tags=>tags.map{|tag| {:title=>(tag.name.blank? ? " " : tag.name), :id=>tag.id}} 
     }
   end
 

app/views/admin/categories/_select_form.html.erb

@@ -14,9 +14,13 @@
       </div>
       <div class="modal-body">
         <% @site_in_use_locales.each do |locale| %>
-          <%= label_tag "name-#{locale}", "#{t(:name)} (#{t(locale)})" %>
+          <div class="control-group">
+            <label class="control-label"><%= "#{t(:name)} (#{t(locale)})" %></label>
+            <div class="controls">
               <input class="input-large" id="<%=locale%>" name="category[title_translations][<%=locale%>]" placeholder="<%=t(:name)%>" type="text">
-          <br/><br/>
+              <span class="help-inline hide">Please enter category tite</span>
+            </div>
+          </div>
         <% end %>
       </div>
       <div class="modal-footer">
@@ -28,13 +32,11 @@
 </div>
 
 <script type="text/javascript">
+  $(function(){
     $("#categoryModal").hide();
-
     $('#categoryModal').modal('<%= categories.blank? ? "show" : "hide" %>');
 
-  $("#add_category").click(function(){
+    $("#add_category").click(createCategory);
-    createCategory();
-  });
 
     $("#categoryModal .modal-body").keypress(function(e) {
       if(e.which == 13) {
@@ -43,14 +45,44 @@
       }
     });
 
+    $.each($('#categoryModal .input-large'),function(){
+      $(this).blur(function(){
+        if($(this).val()==""){
+          $(this).parent().parent().addClass('error');
+          $(this).next().removeClass('hide');
+        }else{
+          $(this).parent().parent().removeClass('error');
+          $(this).next().addClass('hide');
+        }
+      });
+    });
+  });
+
   var createCategory = function(){
+    var valid = true;
+    $.each($('#categoryModal .input-large'),function(){
+      if($(this).val()==""){
+        $(this).parent().parent().addClass('error');
+        $(this).next().removeClass('hide');
+        valid = false;
+      }else{
+        $(this).parent().parent().removeClass('error');
+        $(this).next().addClass('hide');
+      }
+    });
+
+    if(valid){
       $.ajax({
         url : "<%= create_in_form_admin_module_app_categories_path(:module_app_id=>module_app.id.to_s) %>",
         type : "post",
         data: $("input[name^='category']").serialize(),
       }).done(function(data){
+        $.each($('#categoryModal .input-large'),function(){
+          $(this).val("");
+        });
         $("#select_categories select").append("<option value='"+data['id']+"' selected>"+data['title']+"</option>");
         $('#categoryModal').modal('hide');
       });
     }
+  }
 </script>

app/views/admin/tags/_tag_form.html.erb

@@ -20,9 +20,13 @@
       </div>
       <div class="modal-body">
         <% @site_in_use_locales.each do |locale| %>
-          <%= label_tag "name-#{locale}", "#{t(:name)} (#{t(locale)})" %>
+          <div class="control-group">
+            <label class="control-label"><%= "#{t(:name)} (#{t(locale)})" %></label>
+            <div class="controls">
               <input class="input-large" id="<%=locale%>" name="tag[name_translations][<%=locale%>]" placeholder="<%=t(:name)%>" type="text">
-          <br/><br/>
+              <span class="help-inline hide">Please enter tag name</span>
+            </div>
+          </div>
         <% end %>
       </div>
       <div class="modal-footer">
@@ -34,11 +38,9 @@
 </div>
 
 <script type="text/javascript">
+  $(function(){
     $("#tagModal").hide();
-
+    $("#add_tag").click(createTag);
-  $("#add_tag").click(function(){
-    createTag();
-  });
 
     $("#tagModal .modal-body").keypress(function(e) {
       if(e.which == 13) {
@@ -47,16 +49,46 @@
       }
     });
 
+    $.each($('#tagModal .input-large'),function(){
+      $(this).blur(function(){
+        if($(this).val()==""){
+          $(this).parent().parent().addClass('error');
+          $(this).next().removeClass('hide');
+        }else{
+          $(this).parent().parent().removeClass('error');
+          $(this).next().addClass('hide');
+        }
+      });
+    });
+  });
+
   var createTag = function(){
+    var valid = true;
+    $.each($('#tagModal .input-large'),function(){
+      if($(this).val()==""){
+        $(this).parent().parent().addClass('error');
+        $(this).next().removeClass('hide');
+        valid = false;
+      }else{
+        $(this).parent().parent().removeClass('error');
+        $(this).next().addClass('hide');
+      }
+    });
+
+    if(valid){
       $.ajax({
         url : "<%= create_in_form_admin_module_app_tags_path(:module_app_id=>module_app.id.to_s) %>",
         type : "post",
         data: $("input[name^='tag']").serialize(),
       }).done(function(data){
+        $.each($('#tagModal .input-large'),function(){
+          $(this).val("");
+        });
         $("#select_tags .controls").append('<label class="checkbox inline btn active">'+
                                                   '<input id="<%= f.object.class.name.underscore %>_tags_" name="<%= f.object.class.name.underscore %>[tags][]" type="checkbox" value="'+data.id+'" checked>'+data.name+'</label>');
         $("#add_tag_btn").css("margin-left", "180px");
         $('#tagModal').modal('hide');
       });
     }
+  }
 </script>