Custom error messages with Freeform Pro ajax form

Question

I'm using the AJAX form example for Freeform Pro as described here; https://solspace.com/docs/freeform/form/#ajax_validation

However, the error messages are not very useful and simply say "Required field missing input". Does anyone know if there is a simple way to customise these for each field?

I'm thinking this is perhaps more something in javascript than the module itself.

I also have prevent duplicates switched on for the email address, so I would need to ensure there is still an error for the duplicate along with email errors such as "Please enter your email address" or "Please enter a valid email address".

Thanks, Neil

Answer 1

Becaus its late in the day processing wise (AJAX and all). It's not exactly fluid, for me I've previously had to do this by passing the error strings through a function that does a stripos for known messages (you know the field and the message) and swaps them around...

function reformat_errors(i, items){
  var outErr = "";
  //field switch, add more fields in the switch below
  //and add a function to rewrite the messages
  switch (i) {
    case 'emailField':
    case 'emailConfirmField':
      if ( $.isArray(items) ) {
        for ( var c = 0; c < item.count; c++ ) {
          outErr += reformat_errors_emailField(items[c]);
        }
      } else {
        outErr += reformat_errors_emailField(items);
      }
      break;
  }
  return outErr;
}

function reformat_errors_emailField(item){
  var test = item.toLowerCase();
  //add an elseif condition for each message to catch
  if ( test.indexOf("required field missing input") >= 0 ) {
    return "Please enter an Email Address";
  } else if (test.indexOf("does not match") >= 0 ) {
    return "This email address does not match the previous email address"
  } else {
    return item;
  }
}

---

if (data.success == false)
{
  //data.errors
  $.each(data.errors, function(i, item){
    var $errorHolder = $('[name="' + i + '"]').
    parent().find('.error_message');
    //instead of this, lets reformat errors outself
    //var error = ($.isArray(item) ? item.join('<br/>') : item);
    reformat_errors(item);

    //does the error holder field exist?
    if ($errorHolder.length > 0)
    {
      $errorHolder.append('<p>' + error + '</p>').show();
    }
    //lets add it to general errors
    else
    {
       $generalErrors.append('<p>' + error + '</p>').show();
    }
  });
}
else if (data.success)
{
  window.location.href = data['return_url'];
}

from the example on SolSpace

I've deliberately written the javascript out in quite a long handed fashion so its clearer whats going on and becuase its untested, you can probably optimise this somewhat!

Perhaps someone has a better answer...