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

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;}

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.

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

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. :)

That worked thank you!

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.