Forums

Hi all,

I'm new to joomla and obviously to Chronoforms. Love what's possible with Chronoforms, thank you!

I'd like to change the way the validation is displayed. I don't really want the messages to appear, but simply want an asterix (*) to appear next to the form field and at the top or bottom of the form I can add: "(*) denotes fields that are required".
Better still, I'm open to suggestions to move these messages to the far right of each form field (beyond the tool tip) but at least on the same horizontal line as the form field.

Basically I find that the validation messages that appear move the form upwards and downwards when displaying or removing the validation messages, making the page very jumpy and untidy.

I've done various searches but could only find info on changing colours.

Thanks

Hi Prodigal,

You can change the messages by adding a title attribute to the calling input field.

<input type='text' name='field_name' id='field_id' class='required' title='*' . . . />

or possibly title='*'

This won't change the location though. You can do that by adding a message div with a special id

<div id='advice-required-field_id' >*</div>

The structure of the id is 'advice-' + 'validation class' + 'field id' so that you could have different messages for different validations on the same field. This div can be placed anywhere in the form html.

Bob

Thanks for the info. It turns out I'm not experienced enough to get any of that stuff to work. Things went from bad to worse.
Even if I knew my way around the code well enough, it seems like a hell of a lot of work to modify the code for each and every form field.

The best I got was the asterix to appear, but it still pops up below the field name, causing the tool tip to follow it as well, causing everything below it to move down 2 line spaces.

Do other people like their form fields and tool tips icons jumping up and down the page everytime a warning is shown or is removed? It just doesn't seem practical to me...or I'm too fussy 😀

If I remove the tooltips, thing only move down by 1 line space which is less destructive to the pages appearance, but i would prefer tool tips, so any ideas on how to move the tool tips to in front of the field name?

Thanks for the overwhelming support. I'll be sure to recommend you to others. 🙄
I've sorted out what I wanted, juggled a few things around and this is the result.

First image shows form with tool tips on the LHS of title.


This next one shows when the text area is focused it changes colour (in this case yellow)


Now you can see what happens if you try skip a couple fields...red text area and red warning on the RHS *WITHOUT* throwing the lines down. Also, see the correctly filled text area has changed to green


See here the inline validation of the email address, it's checking the format and won't accept an entry in the incorrect format


Showing telephone number formatting restrictions


A happy form...no horrible jumping around the page...neat, clean and the possibilities are endless

Hi Prodigal,

Glad you got it fixed - can you post what you did, as that might help other people!

Sorry we didn't have a canned answer for you, I'm a volunteer here and don't know all the answers, at least not yet.

Best wishes

Bob

Hi Bob,

Could you please explain this to me with an example (from my current form code)?

This won't change the location though. You can do that by adding a message div with a special idCode: Select all
<div id='advice-required-field_id' >*</div>The structure of the id is 'advice-' + 'validation class' + 'field id' so that you could have different messages for different validations on the same field. This div can be placed anywhere in the form html.

I want to get the messages being placed directly under the inputbox instead of the default, behind the inputbox.

This is my tryout but I must been doing somethning wrong because i doesn't work. I have tried several versions based om the validation class and the field_id but I'm lost 😟

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Naam</span> </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="display: none;">Naam</label>
    <input class="cf_inputbox required" maxlength="150" size="20" title="1Dit is een verplicht veld" id="text_1" name="text_1" type="text" />


<br><div id="advice-cf_inputbox_required-text_1">test</div>



  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Organisatie</span> </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="display: none;">Organisatie</label>
    <input class="cf_inputbox" maxlength="150" size="20" title="" id="text_4" name="text_4" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Email</span> </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="display: none;">Email</label>
    <input class="cf_inputbox validate-email" maxlength="150" size="20" title="Controleer uw emailadres" id="text_6" name="text_6" type="text" />
  





  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_text"> <span class="cf_text">Vraag</span> </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="display: none;">Vraag</label>
    <textarea class="cf_inputbox required" rows="3" id="text_9" title="Dit is een verplicht veld" cols="19" name="text_9"></textarea>
    
  </div>
  <div class="cfclear"> </div>
</div>

Wim.

Hi Wim,

Max has changed the Validation library from MooValidation to Live Validation. It seems to me that Live Validation is a lot less friendly and versatile - one of the functions that we've lost is this one.

Bob

Hi Bob,

This is easy to fix, I will add it for the next release!

Regards,
Max

You can change the messages by adding a title attribute to the calling input field.

<input type='text' name='field_name' id='field_id' class='required' title='*' . . . />

or possibly title='*'

Hi Bob,
I'm trying to add an '*' to Required fields and/or change the Field Label to Bold and a different color on a rather long form and my code looks like this:

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 150px;">First Name</label>
    <input class="cf_inputbox required validate-alpha" maxlength="150" size="30" title="" id="text_47" name="firstname" type="text" />
  </div>

Can you tell me how to accomplish this? I would truly appreciate it! This form was created using the Wizard...

Hi NiceIce,

The 'title' entry changes the validation warning/error message and that's not what you want here.

Add the * to the label value, you can also add a style to make it bold:

<label class="cf_label" style="width: 150px; font-weight:bold;">First Name*</label>

Or perhaps better change the class and modify the css to show required labels as bold.

Bob