Forums

Custom Location for JS validation in Chronoforms v5

chronoben 22 Mar, 2014
Hi,

I needed to have the error messages display at the top of my forms instead of the tooltips and noticed there is no solution here. So a little tinkering and 10 minutes later, here is a solution.

Step 1:
Look for the following line

$this.parent().after($($this.data('content')).css('display', 'block'));

in <your_site_root>\libraries\cegcore\assets\gplugins\gvalidation\gvalidation.js (It should be in line 191 or so)

Comment it out

Add the following line right beneath it:
$("#my_errors_gvalidate").css('display', 'block').find(".b_content").html($this.data('content'));



Step 2:
Go to line 23 and change 'tooltip' to 'anything_you_want'
i.e just assign the display value any string.

Step 3:
In your form (Use a custom element or something), make sure the following is available:

<div id="my_errors_gvalidate" class="alert alert-error" style="display:none">
  <a onclick="jQuery(this).parent().hide();" class="close">×</a>
  <div>
    <p class="b_content"></p>
  </div>
</div>


Refresh and voila.

If bootstrap is being used on your site, the error display should be styled properly, otherwise you could just style is yourself - get a custom look.

Cheers.

[[>> Edited to update step 3 : Greyhead <<]]
This topic is locked and no more replies can be posted.