Add client side validation for custom elements

app/actors/scholars_archive/actors/add_other_field_option_actor.rb

@@ -65,7 +65,7 @@ def clean_up_fields (env)
         env.attributes.delete('degree_field_other') if env.attributes['degree_field']
         env.attributes.delete('degree_name_other') if env.attributes['degree_name']
         env.attributes.delete('degree_grantors_other') if env.attributes['degree_grantors']
-        env.attributes.delete('degree_level_other') if env.attributes['degree_grantors']
+        env.attributes.delete('degree_level_other') if env.attributes['degree_level']
       end
 
       def other_affiliation_other_present? (env)

app/assets/javascripts/field_other.js.coffee

@@ -12,8 +12,33 @@
       $(class_selector).find('input').removeClass("hidden")
       $(class_selector).find('input').attr('required', 'required')
 
-    load_default_values = () ->
+    set_single_value_validation = (class_selector) ->
+      options = $(class_selector).prev().find('select option')
+      set_validation(options, class_selector)
+
+    set_multi_value_validation = (class_selector) ->
+      options = $(class_selector).prev()[0].options
+      set_validation(options, class_selector)
+
+    set_validation = (options, class_selector) ->
+      values = (append_end_of_str(item.text) for item in options).filter (item) -> item.length > 0
+      $(class_selector).find('input').change ->
+        constraint = new RegExp('^(?!'+values.join('|')+')(.*)$', "")
+        if constraint.test(this.value)
+          this.setCustomValidity('')
+        else
+          this.setCustomValidity('\"' + this.value + '\" already exists, please select from the list.')
+
+    escape_special_chars = (input_str) ->
+      return input_str.replace(/\./g, '\\.').replace(/\(/g, '\\(').replace(/\)/g, '\\)')
+
+    append_end_of_str = (input_str) ->
+      if input_str.length > 0
+        return escape_special_chars(input_str) + '$'
+      else
+        return input_str
 
+    load_default_values = () ->
       default_degree_level = $('select.degree-level-selector :selected').val()
       if default_degree_level == "Other"
         show_field('.degree-level-other')
@@ -33,13 +58,24 @@
         else
           hide_field(default_other_affiliation)
 
+      $('select.degree-field-selector').each (i, element) =>
+        degree_field = $(element.closest('li')).find('.degree_field_other')
+        if $(element).val() == "Other"
+          set_multi_value_validation(degree_field)
+
+      $('select.degree-name-selector').each (i, element) =>
+        degree_name = $(element.closest('li')).find('.degree_name_other')
+        if $(element).val() == "Other"
+          set_multi_value_validation(degree_name)
+
     load_default_values()
 
     $('select.degree-level-selector').change ->
       selected = $('select.degree-level-selector :selected').val()
       $('.degree-level-other').find('input').val("")
       if selected == "Other"
         show_field('.degree-level-other')
+        set_single_value_validation('.degree-level-other')
       else
         hide_field('.degree-level-other')
 
@@ -48,6 +84,7 @@
       $('.degree-grantors-other').find('input').val("")
       if selected == "Other"
         show_field('.degree-grantors-other')
+        set_single_value_validation('.degree-grantors-other')
       else
         hide_field('.degree-grantors-other')
 
@@ -57,6 +94,7 @@
       $(selected_li).find('input').val("")
       if selected.val() == "Other"
         show_field(selected_li)
+        set_multi_value_validation(selected_li)
       else
         hide_field(selected_li)
     )
@@ -67,6 +105,7 @@
       $(selected_li).find('input').val("")
       if selected.val() == "Other"
         show_field(selected_li)
+        set_multi_value_validation(selected_li)
       else
         hide_field(selected_li)
     )
@@ -77,6 +116,7 @@
       $(selected_li).find('input').val("")
       if selected.val() == "Other"
         show_field(selected_li)
+        set_multi_value_validation(selected_li)
       else
         hide_field(selected_li)
     )

app/inputs/multi_value_select_other_input.rb

@@ -46,18 +46,22 @@ def other_input_help_block_wrapper
   end
 
   def other_input_options(index, other_value, value)
+    show_hide_element = show_hide_class(other_value, value)
     options = build_field_options('')
-    show_hide_element = (other_value.present? || value == 'Other')? [] : ['hidden']
-    index_new = DateTime.now.to_i
     options[:value] = other_value if other_value.present?
     options[:placeholder] = 'Other value'
     options[:class] = ['form-control'] + show_hide_element
     options[:type] = (show_hide_element.include? 'hidden')? show_hide_element : ['text']
+    options[:required] = 'required' if show_hide_element.empty?
     options[:name] = other_option_name
     options[:id] = index.zero? ? other_option_id : ''
     options
   end
 
+  def show_hide_class(element, value)
+    (element.present? || value == 'Other')? [] : ['hidden']
+  end
+
   def other_option_name
     "#{object_name}[#{attribute_name}_other][]"
   end