bootstrap-flask icon indicating copy to clipboard operation
bootstrap-flask copied to clipboard

Customizing validation messages

Open PanderMusubi opened this issue 2 years ago • 1 comments

Please support customization of validation messages as described in https://getbootstrap.com/docs/5.1/forms/validation/#custom-styles

An alternative way or workaround is with oninvalid and oninput:

term = SearchField('term',
                   validators=[DataRequired(), Length(1, 75)],
                   render_kw={
                       'class': 'form-control-lg',
                       'oninvalid': "this.setCustomValidity('Voer een zoekterm in')",
                       'oninput': "setCustomValidity('')",
                       'placeholder': 'Zoek op...'})

However, this can have some issues with HTML encoding of the single quotes and other characters such as &.

PanderMusubi avatar Nov 17 '21 12:11 PanderMusubi

Note that the workaround is not showing the custom text for a mouse hover of the field.

PanderMusubi avatar Nov 23 '21 10:11 PanderMusubi

Solution is to use the message parameter in the validator constructor, see also https://wtforms.readthedocs.io/en/3.0.x/validators/?highlight=message

PanderMusubi avatar Aug 27 '22 12:08 PanderMusubi

Note that the validator message only works when the specific validation fails and the description needs to be changed in red text. For a required field or a field with length specifications, the popup validations will show Please fill out this field or Please lengthen this text to ... and the workaround here is concerned with overriding that text. Still interested in how to do this in a more elegant way with i18n support.

PanderMusubi avatar Aug 27 '22 13:08 PanderMusubi