HTML5 Form Validator Support Product Page

Answered

Style message

Asked 02 May 2016 16:56:40
1
has this question
02 May 2016 16:56:40 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 03 May 2016 07:52:51
03 May 2016 07:52:51 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 03 May 2016 17:22:23
03 May 2016 17:22:23 Dennis Maier replied:
What are the error and success classes? As this is determined by your javascript, correct?
Replied 04 May 2016 07:35:09
04 May 2016 07:35:09 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 04 May 2016 15:44:39
04 May 2016 15:44:39 Dennis Maier replied:
Great,

Thanks Teodor.
Replied 08 Sep 2016 11:05:57
08 Sep 2016 11:05:57 manuel pinto replied:
Is it possible to show a small example here? Thanks
Replied 08 Sep 2016 11:32:49
08 Sep 2016 11:32:49 Teodor Kuduschiev replied:
Hi Manuel,
A small example of what exactly do you need?
Replied 08 Sep 2016 11:35:09
08 Sep 2016 11:35:09 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