Rename ajax.ajaxError to ajax.ajax_error

[sergeylukin]

Camelcase format is not compatible with HTML data-* attributes.
I keep error translations inside HTML data-* attributes, like so:

<div class="js-form-translations"
    data-form-required="This field is required"
    data-form-useremail-ajax="Checking.."
    data-form-useremail-ajax_error="Email already exists"
></div>

and dynamically parse and extend IdealForms errors object with the values
found in .js-form-translations.

Btw the approach of keeping errors in HTML is very convenient, especially
in app that is designed so that translators' UI displays all terms used in
currently viewed View ready to be translated. If translations are kept in JS,
that would be harder to accomplish.

Without this patch, the workaround is dirty:

...

if( key === 'ajax_error' ) key = 'ajaxError';

...

[elclanrs]

I'm not sure I understand why this is an issue.. Could you post an example of your JavaScript code, and what are you doing with those data attributes? How are you using the plugin?

[sergeylukin]

Something like:

var config = {
      errors: {}
    },
    translations = getErrorsTranslationsFromMarkup();

for( var i in translations ) {
  var translation = translations[i];

  // Populate idealforms with errors from attributes like data-form-required="Field is required"
  if( typeof translation === 'string' )
  {
    var error = {};
    error[i] = translation;
    $.extend($.idealforms.errors, error);
  }

  // Populate instance configuration with errors from attributes like data-form-name-min="The name is too short"
  if( typeof translation === 'object' )
  {
    config.errors[i] = translation;
  }
}

$('.js-form').idealforms( config );


// Helper that fetches translations from markup
function getErrorsTranslationsFromMarkup() {
  var el = document.querySelector('.js-form-translations'),
      attributes = [].filter.call(el.attributes, function(at) { return /^data-form-/.test(at.name); }),
      attribute,
      value,
      translations = {};

  for( var i in attributes ) {
    attribute = attributes[i].name.replace('data-form-', '');
    value = el.getAttribute( attributes[i].name );

    if( /-/.test( attribute ) )
    {
      var parts = attribute.split('-'),
          partone = parts[0],
          parttwo = parts[1];

      // Dirty hack.. because data attributes are lowercase,
      // javascript object properies are case sensitive
      // I "normalize" ajaxerror to ajaxError..
      if( parttwo == 'ajaxerror' ) parttwo = 'ajaxError';

      if( typeof translations[partone] === 'undefined' )
      {
        translations[partone] = {};
      }
      translations[partone][parttwo] = value;
    } else {
      translations[attribute] = value;
    }
  }

  return translations;
}