Custom form validation message

[jh]

Hi

Im using some custom form templates which all seem to be working fine, however I have realised the error message that appears if a required field is not filled in is no longer showing.

I guess this is something to do with the customising I have done but I cant work out how to get this message back.

Any help would be greatfully received as my attempts have not worked so far.

EDIT:
Ive tried a few more edits to the template and adding :
'fabrikDataEmpty fabrikError error has-error'
to the container div
and a further div
'<div class="fabrikErrorMessage help-inline text-danger">
<i data-isicon="true" class="icon-warning " ></i> Please enter the name. </div>'
below the element has made the element show like the form has failed the validation (the text is red). However this is showing from the initial form load, not when the form has been submitted and failed validation.

I think I am a step closer but would appreciate any help on making it work correctly. Sorry if Ive missed something basic.

Kind Regards

 

[lousyfool]

Hi,
It seems your customisation has removed certain classes from the containers wrapping the element which JS needs to be able to insert the error message.
Perhaps you have even removed the empty

<div class="fabrikErrorMessage"></div>

container?

Best use the browser console to compare the HTML output of a default template with the one of your customised template -- before an error message appears.

 

[jh]

Hi

Thank you very much for your reply and suggestion, I have compared both the 'bootstrap' template that works and my custom template and it seems like it is all related to the container not updating with the error classes, as you correctly established. I have made various changes, however I still can not get the classes to add the error message class no matter what I have tried. Would you have any suggestion as to where I have gone wrong, as every other part seems to be working fine.

Kind Regards

 

[lousyfool]

You may have checked for JS errors already, but other than this and the above it's obviously hard to impossible to say anything else without seeing the page or knowing what exactly you're doing in your custom template.

 

[troester]

Maybe start creating your custom template again and delete/modify as little as possible.

 

[jh]

Hi

Ive been doing some more work on this and have edited the default_group.php to show an individual element like this (working when labels to the side is selected):

<?php

defined('_JEXEC') or die('Restricted access');

$rowStarted = false;
$layout = FabrikHelperHTML::getLayout('form.fabrik-control-group');
$gridStartLayout = FabrikHelperHTML::getLayout('grid.fabrik-grid-start');
$gridEndLayout = FabrikHelperHTML::getLayout('grid.fabrik-grid-end');
?>

<?php
$element = $this->groups['Form - Add']->elements['chose'];
$this->elements = $element;
$this->element = $element;
$this->class = 'fabrikErrorMessage';

// Don't display hidden element's as otherwise they wreck multi-column layouts
if (trim($element->error) !== '') :
$element->error = $this->errorIcon . ' ' . $element->error;
$element->containerClass .= ' error';
$this->class .= ' help-inline text-danger';
endif;

$displayData = array(
'class' => $element->containerClass,
);

$displayData['row'] = $this->loadTemplate('group_labels_side');

echo $layout->render((object) $displayData);

?>

All validation notices etc are working for the first time when using this code. However before I started adding other elements with custom HTML I wanted to know if someone could help refine this code further - so I dont need each element to have all the code as per above (I guess some sort of loop but I am not able to work out how to do this).

I think this is very useful to any user who wants to customise a form correctly so hopefully someone can kindly assist.

Kind Regards

 

[lousyfool]

As @troester said, "delete/modify as little as possible".
Compare your code with the original default_group.php where a 'foreach' is present to loop through all elements. Something you seem to have omitted.

As @cheesegrits also wrote recently here:

Just be aware, as you probably are, that changing the DOM of the form UI has to be done with great care, as much of the element and form Javascript expects a specific DOM structure to work properly. We make liberal use of jQuery's closest('.foo') and Moo's findClassUp() to find things like wrapper divs, and use many of the class names directly to find things. So while it's possible to fairly dramatically alter the look, the underlying way the elements and form is structured in DOM "shape" has to be preserved.

You also have to be careful to make sure that all your elements are on the form (even if hidden), and that all our hidden form data is preserved. Leaving stuff out can have nasty side effects when the data is submitted.