Format error message "There are incomplete required fields. Please complete them."

  • Profile Image
    oxinst
    Asked on April 11, 2013 at 09:15 AM

    Hi, what CSS do I need to change the formatting of the error messsage "There are incomplete required fields. Please complete them.".  If I would like to make the test blue, and align left, what is the CSS need?


    Thanks

  • Profile Image
    sidharth_kch
    Answered on April 11, 2013 at 09:33 AM

    @oxinst

    Please refer this thread for your requirement: http://www.jotform.com/answers/35144-CAN-I-CHANGE-THE-COLOR-OF-THE-WARNING-AND-ERRORS 

    This helps you! Let us know if you need further assistance.

    Thanks,

    Sidharth

  • Profile Image
    oxinst
    Answered on April 11, 2013 at 10:27 AM

    Thanks for the quick response, got the format fix now.

    is it possible to move this error text to above the submit button, rather than below it?

  • Profile Image
    sidharth_kch
    Answered on April 11, 2013 at 10:38 AM

    @oxinst

    I dont think that will be possible but i am forwarding your request to colleague to see if thats possible.

    Thanks,

    Sidharth

  • Profile Image
    sidharth_kch
    Answered on April 11, 2013 at 10:46 AM

    @oxinst

    Can you please try to inject this css for your form "22972876980370" and see if this is what you want?

    .form-button-error {

    position: absolute;

    top: -20px;

    left:8px;

    }

    Let us know if this helps you.

    Thanks,

    Sidharth

  • Profile Image
    oxinst
    Answered on April 11, 2013 at 11:19 AM

    Thanks.  That works and moved the text, however, the text then wrapped over the button, because it was over two lines.  I guess it can't be done.

    Thanks

  • Profile Image
    jefreylandicho
    Answered on April 11, 2013 at 11:37 AM

    Please try adding the CSS code below in your form styles and see if it works.

    .form-button-error p { position:absolute;top:-25px; } /* You can change the top value */

  • Profile Image
    oxinst
    Answered on April 12, 2013 at 06:53 AM

    @jefreylandicho

    Thanks for your help.  Unfortunatly, still get the same problem.


    Thanks

  • Profile Image
    Welvin
    Answered on April 12, 2013 at 08:59 AM

    Hi,

    Is this what you mean?

    If yes, then please inject this custom CSS codes to your form:

     

    .form-button-error { color: rgb(0, 61, 255) !important; text-align: left !important; }

    Guide: How to Inject Custom CSS Codes 

    Thanks

     

  • Profile Image
    oxinst
    Answered on April 15, 2013 at 04:59 AM

    @Welvin


    Thanks for your reply.  See the image for what I am looking to achieve.


    Also you can see the form here http://form.jotformeu.com/form/30992160585358

    Thanks

  • Profile Image
    sidharth_kch
    Answered on April 15, 2013 at 05:59 AM

    @oxinst

    Please check this form and let me know if this is what you are looking for.

    http://www.jotform.com/form/31042049537954?

    Thanks,

    Sidharth

  • Profile Image
    oxinst
    Answered on April 15, 2013 at 07:09 AM

    @sidharth_kch,

    that is fine when your browser is full width, but if you make your browser narrow (eg for a mobile device), the text then scrolls over the submit button.

    See the image below

    Thanks


  • Profile Image
    abajan
    Answered on April 15, 2013 at 07:18 AM

    It's likely the absolutely positioning that's causing this because elements which are so positioned are removed from the document, as explained here. I think some sort of relative positioning might be a better choice. We'll see if we can find a solution for you.

  • Profile Image
    abajan
    Answered on April 15, 2013 at 08:29 AM

    @oxinst

    After some experimentation, I realized that this would likely require a JavaScript solution due the error message being a dynamically generated element. This can be seen in Chrome if the submit button is right-clicked and then "Inspect Element" clicked:


    Now, look at the bottom panel containing the hierarchy of the form's structure and notice what happens when the form's fields are left blank and the submit button clicked. An extra HTML element containing the error message is generated:


    This would require embedding a copy of the form's source into a web page and adding a script of some sort. Would this be a viable option for you?

  • Profile Image
    oxinst
    Answered on April 15, 2013 at 11:23 AM

    @abajan, thanks for the support, I'll give this a go

     

    Thanks


  • Profile Image
    abajan
    Answered on April 15, 2013 at 02:56 PM

    @oxinst

    Hopefully, I should have a solution for this sometime later today (Barbados time).

  • Profile Image
    abajan
    Answered on April 15, 2013 at 06:49 PM

    Hi again

    Please test this demo. If the error message is correctly positioned, here's how to apply the workaround to your own form:

    1. Add the following rules to its current injected CSS:

    .form-button-error {
    display: none;
    }

    .form-button-error2 {
    color: #C00;
    font-weight: 600;
    }

    .form-button-error2 p {
    margin-top: 0;
    }

    2. Copy the form's full source (see this guide) and embed it into the body of a web page of your choice

    3. Copy this code and paste it anywhere after the form's code, preferably at the bottom of the web page

    That should do it. Should you run into any difficulties, please let us know.

  • Profile Image
    abajan
    Answered on April 15, 2013 at 07:01 PM

    Oops! I forgot something ...

    Search my demo's source for this block of code and note where it's positioned. You'll need to insert that same block into the same position of your form's code after embedding it into the web page.