Element error message position

[mantoze]

Now element error message goes to:
...

How to send element error message to my own div (example: div class="my-error").
This div have all elements of the form.

[victorjonsson]

http://formvalidator.net/#configuration_position

[mantoze]

Thanks
now i understand... own error container id must be "INPUT-ELEMENT_err_msg"
but in documentation i can't find this...

[hacktivista]

I could not find this on the docs neither, please add :)

[victorjonsson]

The solution based on "INPUT-ELEMENT_err_msg" feels rather implicit, it should be considered deprecated and will probably be removed in the future.

There are two different ways to specify where an error message should appear. Either you use the attribute data-validation-error-msg-container on the input-element containing the css-selector of the element where the error message should be placed. The other option is to use the configuration parameter errorMessagePosition to tell the plugin where all error messages should be placed.

All this is described on http://formvalidator.net/#configuration_position

[hacktivista]

It's simpler than assigning data-validation-error-msg-container for each element. The other option would be to allow writing a function on "errorMessagePosition" as "function(element)" in order to allow a predictable (but not common) behavior. This because it's always better to write where the message will be just once than on every single input.

[victorjonsson]

Letting the errorMessagePosition accept a callback function would be a great feature! I'll add that as a feature request.

[thwuersch]

The same callback solution should be implemented for help text positioning.

[victorjonsson]

This will change a bit. This is how the implementation will look

config.inlineErrorMessageCallback = function($input, errorMessage, config) {   
   // Return an element that should contain the error message.
   // This callback will called when validateOnBlur is set to true (default) and/or errorMessagePosition is set to 'inline'
};

config.submitErrorMessageCallback = function($form, errorMessages, config) {
   // Return an element that should contain all error messages.
   // This callback will be called when errorMessagePosition is set to 'top'
};

This change will also deprecate errorMessagePosition: 'custom'. If wanting to use a custom method that handles the displaying/removing of error messages you should use the two methods described above. Return false to prevent the default behaviour when adding/removing error messages. Example:

config.inlineErrorMessageCallback = function($input, errorMessage, config) {   
   if (errorMessage) {
      customDisplayInlineErrorMessage($input, errorMessage);
   } else {
      customRemoveInlineError($input);
   }
   return false; // prevent default behaviour
};

config.submitErrorMessageCallback = function($form, errorMessages, config) {
   if (errorMessages) {
      customDisplayErrorMessagesInTopOfForm($form, errorMessages);
   } else {
      customRemoveErrorMessagesInTopOfForm($form);
   }
   return false; // prevent default behaviour
};

This means that errorMessagePosition is only used to tell whether or not error messages should be displayed in top of form or beside each input when the form gets submitted. The values are either top which is default and inline (changed from element to inline).

Notice that the default configuration uses errorMessagePosition: 'top' in conjunction with validateOnBlur: true which means that inlineErrorMessageCallback will be called when input is validated on blur and that the submitErrorMessageCallback will be called when the form gets submitted.