ChronoForms Validation Issues

Hello,

Once and for all, I need some help with validation formatting because I'm pulling my hair out. I am scouring the forums looking for a straight-forward answer, and nothing I find seems to help. Okay, here goes:

Currently, I don't like live validation and prefer validation on submission (onlyOnSubmit), BUT, my main gripe is that the default validation text/placement is ugly, no doubt about it. Lots of people have said the same thing across several threads, and Max tells people there are ways to fix it or modify it (of course there are), but sounds suitably vague about giving concrete guidance... I even read in one thread from late last year a suggestion that there will be a pop-up option in a future version... but which version? Obviously not the version I downloaded yesterday (15 July 2009).



The default way the red validation text extends off the end of the fields to be validated just doesn't work for detailed validation hints (see my screengrab above). So far, I have read that it is related to the js, there is no easy fix etc... but no-one has published even the 'hard' fix and I'd be happy with that. I have moderate PHP skills, not so good java skills, yet I am comfortable with tweaking the core files, and have been using Joomla for several years (so not a newby).

I was looking for assistance with ANY way to tidy this text up, which could be one of three ways I have thought of so far... I don't care which way, I just want it to be tidier (e.g. professional looking):

1) Move the whole validation error to a line UNDER the field to be validated, but keep the info icon where it is. I CAN css style the text itself, but I just want to move it away from the ends of the fields (see my photoshop mockup below);



OR

2) Some code for creating a pop-up saying to fill in the missing fields or fill them in correctly, preferably with the particular fields highlighted with the red highlight which already exists in the css;

OR

3) Some hint as to why I can't get Server-side validation working (suggested in this thread (and another somewhere) http://www.chronoengine.com/forums.html?cont=posts&f=2&t=12089). I have all the right checkboxes checked in my back end etc, and the very latest version of the component installed but this just doesn't seem to work. I only have mootools listed as a validation library... should there be others? Is this my problem with why the Server-side validation won't work?

Does anyone have an ELEGANT solution to this at all that they could share with me and everyone else? I'm sure it would go down a treat, because, not only is it an awesome component that I have paid for, but I am probably not the only one using it in a professional website with the client waiting (im)patiently in the wings!

Thank you, and I look forward to the constructive, useful responses :-)

Hi,

try to add a div or a span with the error message for every field at any position in your form code, and give each one an id like this:

CF_LV_ERROR_ + field id

so for a field with id text_0 the error span should has an id : CF_LV_ERROR_text_0

this span will get visible when there is an error instead of the default message!

Regards
Max

Like this?

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 130px;">First Name</label>
    <input class="cf_inputbox required validate-alpha" maxlength="150" size="30" title="Please enter your first name using letters of the alphabet only" id="text_4" name="name_first" type="text" />
  <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" src="components/com_chronocontact/css/images/tooltip.png"/></a>
	<div class="tooltipdiv">First Name :: Please enter your first name</div>
  </div>
  <div id="CF_LV_ERROR_text_4">Error Message this</div>
  <div class="cfclear"> </div>
</div>

You also have to enable it in the Validation tab: set Validation Messages type to 'Show My Own divs'.

Hope this helps.

Yes, well, is this format below correct? See how I have inserted it above in the previous code. I have switched "Show my own DIVs" on, but this doesn't work:

<div id="CF_LV_ERROR_text_4">Error Message this</div>

Using the code above, could you clarify what I am doing wrong? In this case the ID of the field is text_4

My issue is your instructions don't seem to be explicit enough, or am I being a dumbass?

I have been trying this for the last 2 hours and I just can't seem to get it to work.

Including

<div id="CF_LV_ERROR_text_4">Please enter your first name</div>

only shows "Please enter your first name" under the label, and when I click submit, it jumps across to be under the field???

Still searching the rest of the forum, and I just can't make sense of it, even when I read people's threads asking exactly the same question.

:?

Hi guys, the div should have style none so its displayed when the error happens:

<div id="CF_LV_ERROR_text_4" style="display:none">Error Message this</div>

when a validation error exists it will get display block!

Regards
Max

Perfect Thanks, solved! Shame about custom coding each field, but others have already complained about this... I wonder if it could be built into the wizard, or hardcoded once-off somewhere?

Could you perhaps enlighten me how I get this server side option code working also? I have tried it, but, again, is there something I am doing wrong?

http://www.chronoengine.com/forums.html?cont=posts&f=2&t=12089

I wonder if it could be built into the wizard, or hardcoded once-off somewhere?

maybe when I have a bright idea about how it should appear in the wizard and be user friendly!

Could you perhaps enlighten me how I get this server side option code working also?

there are many posts about server validation, there a sample code under the setting too, if your code returned anything then it will be an error!

Regards,
Max

I've been using this, looks OK, but still has the obvious limitations of needing to input for each field that is validated

<div id="CF_LV_ERROR_text_1" style="display:none">
<div class="cfclear"> </div>
<span class="cf_alert">
<ol>
<li>Please enter a full name for this employee</li>
</ol>
</span>
</div>

Hi,

i know, this is really old topic, but i think, that is very annoying.

Solution is very easy, just modify css code of form, nothing more.

Padding-left value depends on Label width inside form (in my case was 150px).

Form Code/CSS Styles

original css code:
.LV_validation_message {
font-weight:bold;
font-size:12px;
margin:0 0 0 0;
}
.LV_invalid {
color:#CC0000;
}

modified code:
.LV_validation_message {
display:block;
padding-left:160px;
font-weight:bold;
font-size:12px;
margin:0 0 0 0;
}

.LV_invalid {
color:#CC0000;
}

Hi slinep,

Nice solution, thank you.

Bob