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

  • Profile Image
    trickynek
    Asked 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;}

  • Profile Image
    Mike
    Answered 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
    trickynek
    Answered 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
    Ben
    Answered 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
    trickynek
    Answered on December 07, 2015 at 11:40 AM

    That worked thank you!

     

  • Profile Image
    trickynek
    Answered 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
    Ben
    Answered 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.