gistfile1.md

OK, here's a simple example for entering a height as either feet and inches or as cm.

.height-in-feet
  = f.input :height_in_feet, required: true, input_html: { :"data-mfl-hint-target" => "div.height-details", :"data-mfl-validate-proxy" => "input#consumers_details_health_height", maxlength: 1 }
.height-in-inches
  = f.input :height_in_inches_after_feet, required: true, input_html: { :"data-mfl-hint-target" => "div.height-details", :"data-mfl-validate-proxy" => "input#consumers_details_health_height", maxlength: 2 }
.height-in-centimetres
  = f.input :height_in_centimetres, required: true, input_html: { :"data-mfl-hint-target" => "div.height-details", :"data-mfl-validate-proxy" => "input#consumers_details_health_height", maxlength: 3 }
.hidden
  = f.input :height, required: true, input_html: { :"data-mfl-hint-target" => "div.height-details", :"data-mfl-validation-groups" => "input#consumers_details_health_height_in_centimetres|input#consumers_details_health_height_in_feet,input#consumers_details_health_height_in_inches_after_feet", "data-mfl-validation-proxy" => true }

I attach notification to the proxy on the blur events of the fields we're going to aggregate

$(document).ready ->  
  settings = mfl.clientSideValidationSettings($('form[data-validate]'))
  $('input[data-mfl-validate-proxy]').each (index, element) ->
    validationProxy = $(element).data('mfl-validate-proxy')
    if validationProxy?
      $(element).blur -> 
        $(validationProxy).data('changed', true)
        $(validationProxy).isValid(settings.validators)
        return
    return
  return

The proxy is validated with a custom validation (here it is simply that both feet and inches or cm are not empty)

ClientSideValidations.validators.local['value_object'] = (element, options) ->
  validationGroupString = $(element).data('mfl-validation-groups')
  if validationGroupString?
    validationGroups = validationGroupString.split('|')
    validGroup = [ ]
    $(validationGroups).each (index, element) ->
      validGroup[index] = true
      $(element.split(',')).each (idx, subGroup) ->
        validGroup[index] = validGroup[index] && $(subGroup).val() != ""
        return
      return
    return options.message unless $.inArray(true, validGroup) >= 0
  return

Then when any error is added, I don't display it if the element has a validation proxy

ClientSideValidations.formBuilders["QtipBuilder"] = 
  add: (element, settings, message) ->
    unless element.data().mflValidateProxy?
      mfl.addQtipError(element, message)
    return
    
  remove: (element, settings, message) ->
    unless element.data().mflValidateProxy?
      mfl.removeQtipError(element)
    return