Styling field validation and error highlighting.

  • Profile Image
    LionelB1
    Asked on May 24, 2016 at 07:12 PM

    Change color of red outline of email field box when error exists. And also change blue highlight of active field.

    Hello friends,

    I desire to change two colors:

    1.) The red outline of email field box when an error exists

    2.) The default blue highlight of each active field

     

    I have tried to inject the following CSS code, however without success. Can you please tell me what I am doing incorrectly?

    1.)

    .form-validation-error {

    border: 1px solid #950f04 !important;

    -moz-box-shadow:none !important;

    -webkit-box-shadow:none !important;

    box-shadow:none !important;

    }

     

    2.)

    .form-textbox:focus {

    border-color:#926138 !important;

    }

  • Profile Image
    Chriistian
    Answered on May 24, 2016 at 10:40 PM

    Please inject the custom css below to change the color of the red outline and the blue highlight of each active field.

    .form-line-error input:not(#coupon-input),  .form-line-error textarea,  .form-line-error .form-validation-error {

        border: 1px solid #950f04!important;

    }

    .form-textbox:focus, .form-textarea:focus {

        border: 1px solid #926138 !important;
        outline: none;

    }

    Here's a demo form so you can see it in action: https://form.jotform.com/61448196001956 

    If you need further assistance, please let us know.

  • Profile Image
    LionelB1
    Answered on May 25, 2016 at 04:57 PM

    Thank you very much for this help!

    However, now another problem exists: When the 'Home Country' field in the second row is selected, the layout changes. Can you please see this strange issue and advise me on what to do?

     

    http://www.pucaraspanishschool.ec/index.php/make-a-reservation

  • Profile Image
    Mike
    Answered on May 25, 2016 at 08:00 PM

    To fix the layout change issue, please use the next CSS:

    http://pastebin.com/raw/hVbfT2FS

    Form example:

    https://form.jotform.com/61457487828976

    Thank you.

  • Profile Image
    LionelB1
    Answered on May 25, 2016 at 10:29 PM

    Hi, I have injected the CSS you provided, however the layout problem still exists when the cursor is placed inside the "Home Country" field, and also now there is an unwanted highlight occurring around the field with an error. Please see:

     

    http://www.pucaraspanishschool.ec/index.php/make-a-reservation

  • Profile Image
    Chriistian
    Answered on May 25, 2016 at 11:41 PM

    I checked your form and it appears that the css provided by my colleague was not applied to your form. That is why the issue still persists. I have now injected the necessary css to your form so the issue should be resolved. Please check on your end to confirm. If you need further assistance, please let us know.

  • Profile Image
    LionelB1
    Answered on May 26, 2016 at 08:29 AM

    Thank you so much, the form is now as desired! 

    However, I DID inject the custom CSS provided by your colleague....am I not following the correct procedure? I go to From Preferences, Form Styles, and then insert CSS into the bottom box 'Inject Custom CSS.' I see also, that CSS can be injected using the Designer application...which method is correct?

     

    Thanks!

  • Profile Image
    EltonCris
    Answered on May 26, 2016 at 09:25 AM

    Whichever method that is easy for you. They should both work.

    Just make sure to paste the CSS code into the bottom section if you have existing CSS codes in your form.

    Cheers!