Format and Adjust Validation Messages

  • Resolved pvtsolver

    (@pvtsolver)


    5 years, 10 months ago

    Hello,

    I want to format the validation messages that automatically appear to the user once he/she enters invalid numbers.

    I am looking for the following:
    1. For Field Box: Change the border-color to red.
    2. For Error Message: Remove both border and fill-color; Adjust margin/padding.

    Moreover, I need to change the text of the message to “Valid Range = [ {Min} – {Max} ]”, if the user enters a number outside the accepted range.

    Please advise.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author codepeople

    (@codepeople)

    5 years, 10 months ago

    Hello @pvtsolver

    The validation rules don’t include ranges. There is a validation rule to check the max value, and another rule to check the min value. So, you cannot define the error text as follows:

    Valid Range = [ {Min} – {Max} ]

    Concerning to the field, if you want set its border in red, enter the style definition below into the “Customize Form Design” attribute in the “Form Settings” tab (https://cff.dwbooster.com/images/documentation/form-settings-tab.png):

    
#fbuilder .cpefb_error{border:1px solid red !important;}

    The class name applied to the tooltip with the error message would be:

    
#fbuilder .message.cpefb_error{}

    Enter it with the CSS rules you prefer.

    Best regards.

    Thread Starter pvtsolver

    (@pvtsolver)

    5 years, 10 months ago

    Okay,

    Can I remove the arrow of the tooltip?

    Plugin Author codepeople

    (@codepeople)

    5 years, 10 months ago

    Hello @pvtsolver

    The style definition in this case would be:

    
#fbuilder div.cpefb_error:after{display:none !important;}

    Best regards.

    Thread Starter pvtsolver

    (@pvtsolver)

    5 years, 10 months ago

    The border color of the field box still the same. I used this:

    #fbuilder .cpefb_error {
border-color: red;
background-color: #ffffff
!important;
}

    Please advise.

    Plugin Author codepeople

    (@codepeople)

    5 years, 10 months ago

    Hello @pvtsolver

    Please use:

    
#fbuilder .field.cpefb_error{
   background-color: #ffffff !important;
   border-color: red !important;
}

    Best regards.

    Thread Starter pvtsolver

    (@pvtsolver)

    5 years, 10 months ago

    Great, one more question please..

    Moreover, I want the font-color of the entry box to be the same even if it was wrong.

    The following code is not working:

    #fbuilder .cpefb_error {
   background-color: #ffffff !important;
   border-color: #fc0000 !important;
   color: #707070 !important;
}

    Thank you in advance.

    • This reply was modified 5 years, 10 months ago by pvtsolver.
    Plugin Author codepeople

    (@codepeople)

    5 years, 10 months ago

    Hello @pvtsolver

    Please, note the selector I recommend you is different.

    For the input box:

    
#fbuilder .field.cpefb_error {}

    For the floating tooltip with the error message:

    
#fbuilder .message.cpefb_error{}

    So, assuming you want modify the appearance of the input box with your styles definition:

    
#fbuilder .field.cpefb_error {
   background-color: #ffffff !important;
   border-color: #fc0000 !important;
   color: #707070 !important;
}

    I did it through the developers’ console in my browser, and it works very well:

    Best regards.

    Thread Starter pvtsolver

    (@pvtsolver)

    5 years, 10 months ago

    Thank you so much for your quick support 🙂

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Format and Adjust Validation Messages’ is closed to new replies.