jQuery Validation: how to implement a more friendly error message alert?

Question

Like SO's question or answer form alert message: Body must be at least 30 characters; you entered 3. Body must be at least 30 characters; you entered 3. , the last number display the current amount of characters. For that I think that I need calculate the number and append the error message, and I can append the number to the errorPlacement 's first parameter error like this: http://jsfiddle.net/sscs1kbx/5/

errorPlacement: function(error, element) {
  var placement = $(element).data('error');
  if (placement) {
     error.append(CKEDITOR.instances.editor1.getData().replace(/<[^>]*>/g, '').length);
    $(placement).append(error)
  } else {
    error.insertAfter(element);
  }
}

I works fine when user click submit button first time, but errorPlacement is called only once at the first time submitting, so, after that, I works failed? which method or function should I use for this goal? Thanks a lot in advance!

Answer 1

You can specify a dynamic error message in your addMethod("minlengthxo",...) :

jQuery.validator.addMethod("minlengthxo", function (value, element, param) {
    debugger
    originalVal = CKEDITOR.instances.editor1.getData().replace(/<[^>]*>/g, '');
    var length = $.isArray(originalVal) ? value.length : this.getLength(originalVal, element);
    return length >= param;
}, function (params, element) {
    enteredLength = CKEDITOR.instances.editor1.getData().replace(/<[^>]*>/g, '').length;
    return 'You need input at least 18 characters, now you entered ' + enteredLength
});

Here is a live exemple