HTML5 Form Validator Support Product Page

Answered

Style message

8 years ago Dennis Maier posted:
With a client side validation, how can I style the message and form element displayed when the validation is triggered.

For example the font, color, etc.of the message "This field required" and possibly a red border around the form field when a Required field not filled.

You Features page shows this styling when a Confirm Email field doesn't compare.

I would like to use this same style for a Required field.

Replies

Replied 8 years ago
8 years ago Teodor Kuduschiev replied:
Hello Dennis,
As described on the product page, the styling (error, success, etc.) from the screenshots and showcases are available when this extension is used with Bootstrap 3 and Bootstrap 3 Forms Designer.
In order to style them on a custom form, you must add your own css styles for the error and success classes.
Replied 8 years ago
8 years ago Dennis Maier replied:
What are the error and success classes? As this is determined by your javascript, correct?
Replied 8 years ago
8 years ago Teodor Kuduschiev replied:
Error:
input.error -> for the input, which needs error styles
label.error -> for the error message, that appears after the error input

Success:
input.valid -> for the input, which needs success styles

You can easily find these, using your browser Dev tools, and inspect the element, which class you need to know.
Replied 8 years ago
8 years ago Dennis Maier replied:
Great,

Thanks Teodor.
Replied 8 years ago
8 years ago manuel pinto replied:
Is it possible to show a small example here? Thanks
Replied 8 years ago
8 years ago Teodor Kuduschiev replied:
Hi Manuel,
A small example of what exactly do you need?
Replied 8 years ago
8 years ago manuel pinto replied:
Hi, thanks for the reply ... meanwhile i just got what i want.

I buid my own css file and just write

label.error {
background-color: #FFF;
color: red;
}

and my form just display the error message in red

Reply to this topic