Forums

Hi all,

I have my form up and running, I just need to style the validation text a little, is this possible, I took a look over at the script creators website but couldn't find any examples of anything other than the default style.

For example, I am trying to position the validation text to the right of the input box.

Appreciate any help, great form by the way.

Thanks

Hi lw_d,

The advice is in it's own div - here's an example:

<div id="advice-required-field_name" class="validation-advice" style="display: block; visibility: visible; opacity: 1;">This is a required field.</div>

Just add css to put the div where you want it.

Bob

Thanks Bob,

I'll give that a try.

Lee

Hi Bob, sorry for the further questions, just wondering which file I edit?

Appreciate the help.

Thanks
Lee

Hi Lee,

You don't edit any file - just add some css to your form html. For example:

<style type="text/css">
div.validation-advice {
  color:navy;
  font-style:italic;
}
</style>

Bob

Hi Bob,

Thanks for the update, what I am trying to do is position the validation message it a better place, so that input fields don't drop down. This can be done using CSS, but it would be cleaner and more cross-browser friendly if the div elements were positioned differently.

I have jumped into the mooValidation.js file (I'm using mootools validation) but the script is a little difficult to change, i.e. content is not separate from presentation.

No major problem, I will either change the mooValidation.js or use CSS as you mentioned, just wondered if there was an easier way.

Thanks
Lee

Hi Bob,

I also wanted to style the Validation Messages, but couldn`t get it to work properly.

Here is an example Code out of my Form:
[code]<td class="text_rechts">

Hi mariokrupik,

The validation messages aren't in the input tag. Here's an example:

<div id="advice-required-name" class="validation-advice" style="opacity: 0.999999;">This is a required field.</div>

Style on the valdidation-advice class instead.

Bob

I don`t think I understand what you mean.
I don`t see a DIV Class with the specified ID in the Source Code of my Form.
I am using Mootools for Validation.

Here is a Link to the Form of my Website: <!-- w --><a class="postlink" href="http://www.schoenruh.com/anfrage.html">www.schoenruh.com/anfrage.html</a><!-- w -->

Maybe someone has an Example Form, where I can have a look on.

thanks,
Mario

I too am using Mootools, looks like the styling is brought in from a js file. Take a look here:

http://www.schoenruh.com/components/com_chronocontact/js/mooValidation.js

Then search for <div>

This is what I meant by code not being separated by presentation, its not a major problem but just means a designer come coder like myself needs to work a little harder to style.

Thanks lw_d,

finally got it working!

For everyone else who uses mootools as Validation, just add

.validation-advice {font-weight: bold; color: red;}

to add the Style Bold and red Color to your Validation Messages.

Glad you got it working. I will be editing the js file later in the week to try and position error validation to the right of the input field, if anyone has already done this, please post, will save me some work🙂

Hi Mario & lw_d,

You do **not** need to hack the .js files to format the validation messages (though of course you can if you prefer). You can relocate and recolor with css in your form code or your template.

Mario: Glad you found it - here's the code from the source of your page

<div id="advice-required-anreise" class="validation-advice" style="display: block; visibility: visible; opacity: 1;">Dieses Feld darf nicht leer sein!</div>

The validation works by changing the visibility of this div so, although it is there you may not see it until the message is displayed.



Bob

Thanks for the help Bob, one thing I need to try and change is the extra space created when displaying the * required text, I have the following so for my this area:

.validation-advice {
color:#f00;
position:relative;
top:-25px;
margin:0 0 0 30em;
height:0;
}

This pushes the required text up, so that it is inline with the input field, but also pushes it to the right. From an interface point of view, this is much cleaner for me, well, with the design I have put together anyway, others will of course change the margin and top values to reflect their form style.

I haven't tested it in ie yet, no doubt that little fella will have a few words🙂

Lee

Hi guys,

I opened again the post cause maybe I'm missing smtg I can't see..

This is the part of my form:

<div class="form_item"><div class="form_element cf_checkbox"><label class="cf_label">I have read and do agree to the Legal Conditions (*)</label><div class="float_left"><input value="check 1" class="radio required-legal" id="check_1" name="check_1" type="checkbox"></div></div><div class="clear"> </div></div>

(I have extended one message in js validation for customizing legal stuff message)

I want to make appear the validation message:
above the form item (not only the form element)
how to do that?

Then, I have tried to add in style1.css
I need to style the "legal validation" in red bold.

.radio required-legal {font-weight:bold; color:#f00;}

or

# radio required-legal {font-weight:bold; color:#f00;}

or

.required-legal {font-weight:bold; color:#f00;}

but nothing changed.

As well I tried to style directly the form as example:

<div class="form_item"><div class="form_element cf_checkbox"><label class="cf_label">I have read and do agree to the Legal Conditions (*)</label><div class="float_left"><input value="check 1" class="radio required-legal" style="display: block; visibility: visible; opacity: 1; color:#f00" id="check_1" name="check_1" type="checkbox"></div></div><div class="clear"> </div></div>

Nothing happened.. any help? thanks A LOT!

You are not styling the correct class.

try something like:

.validation-advice {
color:#f00;
position:absolute;
top:0px; left:20px;
font-weight:bold;
}

however, this will put all the validation errors in the same place - so while they might be above the form like you wanted, if you have more than one error they will be stacked on top of each other (not a good idea).

Look at Bob's advice a few posts back for a good suggestion on styling the validation errors

Ah ok, thanks!
😀

Hi all

I also want to change "validation messages format" but cant find anything in style1.css

1. Where is correct css file? In ..../components/com_chronocontact/css ???

2. I wanna change font size and font color (to Red) ..What will I do?

Regards

Hi c a g a t a y,

There is no css by default. See samoht's post a couple earlier in this list and add this css to your page. See any good css tutorial to find the entries for color and font-size.

Bob

yep, Bob is correct - as usual🙂

To use CSS you just need the right class or id name and to be sure that your CSS code is being read.
You can put your CSS styles in style1.css (Chronoforms default css file) or you can insert a style tag at the top of your form

<style type="text/css">
<!--
.validation-advice {
color:red;
font-size:smaller;
}
//-->
</style>
<!-- Now on with the rest of your form -->

Hope that helps.

if you need straight forward help with CSS - try w3schools to get you started.

Hi samoht & c a g a t a y,

Samoht's code will work perfectly but is not completely elegant. Just for the record the *official* Joomla way to do this is to add the css snippet into the page header by adding this to the Form HTML:

<?
$doc =& JFactory::getDocument();
$doc->addStyleDeclaration(".validation-advice { color:red; font-size:smaller; }");
?>

Note: this is identical css, it's just a different way of adding it to the page.

Bob

cool,
Thanks Bob!!
I'd like to do things the *official* way. I suppose this method is only for small declaration. If you were trying to style the whole form - then put the code in a separate css file.

Bob, does Joomla have a reference page for *official* ways to work with joomla?

Hi samoht,

There are three other similar methods:

$doc->addScriptDeclaration("javascript snippet");
$doc->addStyleDeclaration("css snippet");
$doc->addStyle("css file url");
$doc->addScript("javascript file url");

There's no official list that I know of though the Developers Wiki is slowly filling up with more useful stuff.

Bob

As a newbie

still cant to change font size and font color (to Red) (of validation messages) 🙄

Hi c a g a t a y,

We can't help unless you tell us what you've done.

Samoht's post tells you exactly what you need to do and it will work with most forms and templates.

Bob

Hi GrayHead

For example
I wanna make below warning and other validation messages RED and 9px
"Please enter a valid email address. For example [email]fred@domain.com[/email]."

Another thing;

1. It is hard to find where this ERROR/VALIDATION messages
2. The color of this messages dont be same wtih form's text message IN DEFAULT

Kindly Regards

Hi c a g a t a y,

Please please read samoht's message and do exactly as he says.

Bob

Hi GrayHead

I read What Samoht said below message. But realy didnt find "which css" he is talkin?
There is more than 8 css in my Joomla/Component/ChronoForm folder and more than 10 css in Joomla/Administrator/Component/ChronoForm

Regards

You are not styling the correct class.
try something like:
.validation-advice {
color:#f00;
position:absolute;
top:0px; left:20px;
font-weight:bold;
}

however, this will put all the validation errors in the same place - so while they might be above the form like you wanted, if you have more than one error they will be stacked on top of each other (not a good idea).

Look at Bob's advice a few posts back for a good suggestion on styling the validation errors

Hi c a g a t a y,

Sahmoht wrote:
You can put your CSS styles in style1.css (Chronoforms default css file) or you can insert a style tag at the top of your form

And then there are three more posts giving you ways to add it to the page.

Bob

/public_html/components/com_chronocontact/css/style1.css

I added below codes to the bottom of style1.css

nothing changed 😶

.validation-advice {
color:#f00;
position:absolute;
top:0px; left:20px;
font-weight:bold;
} 

style1.css bottom view

.no_delete { border:none;}

.cf_button1 {

	width:70px!important;
}

.radio { width:20px!important;}

.float_left { float:left;}

.clear { clear:both; font-size:0px; line-height:0px;}

.width1 { width:571px;}

.validation-advice {
color:#e10202;
position:absolute;
top:0px; left:20px;
font-weight:bold;
} 

Hi c a g a t a y,

Then add it into the form html.

Bob

Hi, always refresh your page before retesting, the style1.css will affect firefox, don't test with IE while doing this!

Cheers
Max

Hi all
My problem resolved with the great help of Bob 😛
Thanks also admin :wink:

Kindly regards