Customizable Error Message

Ok, I think I found the CSS for changing the style of the error message. Add this to a stylesheet to your liking

/* Form errors */

.lp-form-errors div.content {
  font-family: 'Roboto' !important;
  font-size: 13px;

}

.lp-form-errors div.content div.error {
  background-color: #cc0000;
  padding:8px;
  font-size:14px;
  line-height:18px;
  font-weight:bold;
  color: #fff;
 font-family: 'Roboto' !important;
}

I also found the script we use at ConversionLab to do custom error messages. See the last 4 lines in the script. The first value e.g. “name” has to be the same as your form field id.

<script type="text/javascript">
  (function(e){function t(){var t=window.module.lp.form.data;var n=t.validationMessages;var r=t.validationRules;this.changeTitle=function(n){e(function(){e("#"+t.errorContainerId).find("div.error").text(n)})};this.changeField=function(e,t,i){if(!n[e])return;n[e].required=t;if(i&&r[e].email)n[e].email=i;if(i&&r[e].phone)n[e].phone=i}}window.errors=new t(lp.jQuery)})(lp.jQuery)
  
  // Change the title bar of the validation error box
  errors.changeTitle("The following errors has to be fixed:");
  
  // Change the error text for specific fields. The first message is shown when nothing is
  // entered and the second is shown when an invalid email/phone number is entered.
  errors.changeField("name", "Name is required");
  errors.changeField("email", "Email is required", "Enter your valid email");
  errors.changeField("phone", "Phone is required", "Enter a valid phone number");
  errors.changeField("postalcode", "Postal code is required", "Enter a valid postal code");

</script>