What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How to remove required field warnings, but still keep form error message upon submission

    Asked by trickynek on December 03, 2015 at 01:36 PM

    Hi, I am trying to style the forms so that it does not show the individual line error messages for required fields, but still shows the "There are errors on the form. Please fix them before continuing." message. I have successfully hidden all the warnings and red styling, please let me know if there is a way to still show the form error message that shows up when you click submit.

     

    Form link: http://innthequarter.com/contact.htm

     

    CSS applied so far:

    .form-label-top {

    display: none;

    }.form-line-error {

    background: none repeat scroll 0 0;

    }

    .form-required,

    .form-button-error {

    display: none !important;

    }.form-validation-error {

    -moz-box-shadow:none;

    -webkit-box-shadow:none;

    box-shadow:none;

    }.form-line-error {background: none repeat scroll 0 0 !important;}.form-error-message,.form-required,.form-button-error {display: none !important;}.form-validation-error {-moz-box-shadow:none !important;-webkit-box-shadow:none !important;box-shadow:none !important;}

    Page URL:
    http://innthequarter.com/contact.htm

    required field form error message warnings
  • Profile Image
    JotForm Support

    Answered by Mike on December 03, 2015 at 02:31 PM

    The following CSS should remove the 'There are errors on the form. Please fix them before continuing.' warning message located below for submit button.

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

    It seems to be working properly on your form.

    If the issue still persists, please let us know.

  • Profile Image

    Answered by trickynek on December 03, 2015 at 04:26 PM

    Hi - thank you for the response - I actually want to do the opposite - i WANT to show the message "There are errors on the form. Please fix them before continuing" - but without showing any of the warnings

  • Profile Image

    Answered by Ben on December 03, 2015 at 06:04 PM

    To accomplish what you wanted, you should find the same rule (.form-button-error) and remove it completely.

    Once you do, it will look like this:

    So using your CSS from above:

    .form-label-top {
      display: none;
    }
    .form-line-error {
      background: none repeat scroll 0 0;
    }
    .form-required, .form-button-error {
      display: none !important;
    }
    .form-validation-error {
      -moz-box-shadow:none;
      -webkit-box-shadow:none;
      box-shadow:none;
    }
    .form-line-error {
      background: none repeat scroll 0 0 !important;
    }
    .form-error-message, .form-required, .form-button-error {
      display: none !important;
    }
    .form-validation-error {
      -moz-box-shadow:none !important;
      -webkit-box-shadow:none !important;
      box-shadow:none !important;
    }

    and applying the change (removing the bold segments), it would end up as this:

    .form-label-top {
      display: none;
    }
    .form-line-error {
      background: none repeat scroll 0 0;
    }
    .form-required {
      display: none !important;
    }
    .form-validation-error {
      -moz-box-shadow:none;
      -webkit-box-shadow:none;
      box-shadow:none;
    }
    .form-line-error {
      background: none repeat scroll 0 0 !important;
    }
    .form-error-message, .form-required {
      display: none !important;
    }
    .form-validation-error {
      -moz-box-shadow:none !important;
      -webkit-box-shadow:none !important;
      box-shadow:none !important;
    }

    Now you can also write the same in this manner:

    .form-label-top {
      display: none;
    }
    .form-line-error {
      background: none transparent;
    }
    .form-error-message, .form-required {
      display: none !important;
    }
    .form-validation-error {
      -moz-box-shadow:none;
      -webkit-box-shadow:none;
      box-shadow:none;
    }

    * I have just removed the duplicate entries.

    Do replace the current code (related to errors) with the one right above and it will work for you as you wanted.

    Do of course let us know how it goes. :)

  • Profile Image

    Answered by trickynek on December 07, 2015 at 11:40 AM

    That worked thank you!

     

  • Profile Image

    Answered by trickynek on December 07, 2015 at 11:42 AM

    Next Question - Can I control where the error message is displayed? IE, I would like it at the top of the form instead of the bottom
  • Profile Image

    Answered by Ben on December 07, 2015 at 11:48 AM

    I am glad that the above worked for you :)

    Now since we can reply to only one issue / question per thread I have moved your new question to a new thread here: http://www.jotform.com/answers/719536

    We will be replying to you there shortly.