Inline Form Errors

inline_errors.css

<style>
  /*Error text styling*/
  .errorSpan{
    color: red;
	  float: right;
    font-family: inherit;
    position: absolute;
    bottom: -20px;
    right: 0px;
    font-size: .85em;
  }
  /*Error field styling */
  .hasError{
    border: 1px solid red !important;
  }
  .hide{
  	display:none;
  }
  .lp-form-errors{
    display: none !important;
  }
</style>

inline_errors.js

<script>
var errorSpan=document.createElement("span");errorSpan.classList.add("hide"),errorSpan.classList.add("errorSpan");var focusField,textInputs=document.querySelectorAll("input[type=text], input[type=tel], input[type=email], textarea"),optionList=document.querySelectorAll("input[type=checkbox], input[type=radio]"),dropdowns=document.querySelectorAll("select"),validateField=function(){var e=!0;lp.jQuery(".lp-pom-form form").validate().form();for(var t,r,o=focusField.id,n=lp.jQuery(".lp-pom-form form").validate().errorList,i=0;i<n.length;i++)o==n[i].element.id&&(e=!1,t=n[i].element.parentNode.id,"checkbox"!=n[i].element.type&&"radio"!=n[i].element.type||(t=document.getElementById(fieldId).parentNode.parentNode.parentNode.id),r=n[i].message);clearError(focusField),e||showError(o,t,r)},validateForm=function(){lp.jQuery(".lp-pom-form form").validate().form();for(var e=lp.jQuery(".lp-pom-form form").validate().errorList,t=0;t<e.length;t++){var r=e[t].element.id,o=e[t].element.parentNode.id;"checkbox"!=e[t].element.type&&"radio"!=e[t].element.type||(o=document.getElementById(r).parentNode.parentNode.parentNode.id);var n=e[t].message;showError(r,o,n)}},showError=function(e,t,r){var o=errorSpan.cloneNode(!0);o.textContent=r,o.classList.remove("hide"),document.getElementById(t).appendChild(o),document.getElementById(e).classList.add("hasError")},clearError=function(e){var t=e.parentNode.id;"checkbox"!=e.type&&"radio"!=e.type||(t=e.parentNode.parentNode.parentNode.id);var r=document.getElementById(t).querySelector(".errorSpan");r&&r.parentNode.removeChild(r),e.classList.remove("hasError")};function clearErrors(){var e=document.querySelectorAll(".errorSpan");if(0<e.length)for(var t=0;t<e.length;t++)e[t].parentNode.removeChild(e[t]);for(t=0;t<textInputs.length;t++)textInputs[t].classList.remove("hasError");for(t=0;t<dropdowns.length;t++)dropdowns[t].classList.remove("hasError")}function gaForm(e){var t,r,o;if(e.preventDefault(),e.stopPropagation(),r=lp.jQuery(e.currentTarget).closest(".lp-pom-form"),(t=r.children("form")).valid())return"undefined"!=typeof eventTracker&&eventTracker._isGaLoaded()?(o=lp.jQuery.extend({category:"Form",action:"Submit",label:"#"+r.attr("id")},r.data("ubGAParams")),eventTracker._logEvent(o),ga("send","event",o.category,o.action,o.label,{hitCallback:function(){return t.submit()}})):t.submit()}function yourSubmitFunction(e,t){e.preventDefault(),lp.jQuery(".lp-pom-form form").validate().form()?(gaForm(e),lp.jQuery(".lp-pom-form form").submit()):(clearErrors(),validateForm(),wiggleForm())}function wiggleForm(){var e=$("#lp-pom-box-16").addClass("wiggle");setTimeout(function(){e.removeClass("wiggle")},1e3)}for(var i=0;i<textInputs.length;i++)textInputs[i].addEventListener("blur",function(){validateField()});for(i=0;i<textInputs.length;i++)textInputs[i].addEventListener("focus",function(){focusField=this});for(i=0;i<optionList.length;i++)optionList[i].addEventListener("click",function(){focusField=this});for(i=0;i<dropdowns.length;i++)dropdowns[i].addEventListener("click",function(){focusField=this});for(i=0;i<optionList.length;i++)optionList[i].addEventListener("change",function(){validateField()});for(i=0;i<dropdowns.length;i++)dropdowns[i].addEventListener("change",function(){validateField()});lp.jQuery(function(t){t(".lp-pom-form .lp-pom-button").unbind("click tap touchstart").bind("click.formSubmit",function(e){yourSubmitFunction(e,t)}),t("form").unbind("keypress").bind("keypress.formSubmit",function(e){13===e.which&&"textarea"!==e.target.nodeName.toLowerCase()&&yourSubmitFunction(e,t)})});
/**
   * Do not remove this section; it allows our team to troubleshoot and track feature adoption.
   * TS:0002-03-080
*/
</script>

Hi noahub,
When i use the code, the inline errors display when i click through the formfields but i want them only to show when you click the submit-botton. Is it possible?

Juliajorgensen,

Although a long time ago, do you remember how you changed the error text? Do you even have the code left?

@fblanke @Juliajorgensen @noahub did you guys find any solution to display errors on CTA click? If so, could you please share it, thanks!
Im using the multi step form if that helps.