Currently, it is assumed that inputs being validated are placed inside a <label> element, and validation messages are appended to this element, thus resulting in the following HTML structure after a validation error:
<label class='validation error'>
<input required>
<span class='validation-message'>Please fill this field</span>
</label>
However, this is not always the case. Sometimes, the HTML structure is more complex or the validation message should be placed somewhere else. Therefore, it should be possible to customize validation messages' placement on a per-input basis.
A first version might support customizing the ancestor in which the message will be appended. For instance:
<label>
<div class='tagged-input'>
<span class='tag'>some tag</span>
<span class='tag'>other tag</span>
<input data-validation-append='label'>
</div>
</label>In the previous example, we would be telling the library that we want the messages to be appended to the closest ancestor that matches the label selector.
Future versions may extend this configuration, allowing for specification of any element related to the input being validated, not only ancestors.
Currently, it is assumed that inputs being validated are placed inside a
<label>element, and validation messages are appended to this element, thus resulting in the following HTML structure after a validation error:However, this is not always the case. Sometimes, the HTML structure is more complex or the validation message should be placed somewhere else. Therefore, it should be possible to customize validation messages' placement on a per-input basis.
A first version might support customizing the ancestor in which the message will be appended. For instance:
In the previous example, we would be telling the library that we want the messages to be appended to the closest ancestor that matches the
labelselector.Future versions may extend this configuration, allowing for specification of any element related to the input being validated, not only ancestors.