Validation Display Issue in FF3

I'm using Joomla 1.5.8 with Chromoforms 3.0.

I have created a test Form which I want to simply collect persons Name and Email Address. The optics of form are important so I have the input field set to display under the text label (versus Text Label next to Input field). So this is the only different part I'm doing from all test forms I've seen.

The Name field will validate for Required field whereas Email Address will validate for both Required and Valid Email address. When I test the validation it does appear to work in both FF Version 3 and IE7. But my problem is in the display for FF Version 3.

http://roitest.roitechsolutions.com/index.php?option=com_chronocontact&chronoformname=FormTest

When I test the validation on IE7, it works nicely by opening up space below the input field and showing the Error. However, in FF3, the Error displays over the existing text.

Any ideas on how I can fix this for Firefox 3? Either I'd like to make Firefox 3 validation display the same was as IE7 or possibly change it to an alert. I'm open to other options except I cannot put "Text Field next to Input Field".

Here's my form code in case you need it:

center>
<div align="center" id=formlayer style="width:500px; padding:5px; border: #FFFFFF 2px dotted; background-color:#2B4382">

<div  class="form_item">
  <div class="form_element2 cf_text"><span class="cf_text">Get</span></div>
</div>
<div  class="form_item" align="center">
  <div class="form_element_title cf_text"><span class="cf_text"><Strong>" Get Test Guide Now!"</Strong></span></div>
</div>
<div  class="form_item" align="center">
  <div class="form_element2 cf_text"><span class="cf_text">Via Email </span></div>
  <div class="clear"> </div>
</div>
<div  class="form_item" align="center">
  <div class="form_element2 cf_textbox">
    <label class="cf_label">Your Name :</label>
   </div>
</div>

<div  class="form_item" align="center">
  <div class="form_element2 cf_textbox">
    <input class="cf_inputbox required" maxlength="150" size="30" id="text_3" name="text_3" type="text">
  </div>
  <div class="clear"> </div>
</div>



<div  class="form_item" align="center">
  <div class="form_element2 cf_textbox">
    <label class="cf_label">Your Email : </label>
  </div>
</div>

<div  class="form_item">
  <div class="form_element2 cf_textbox">
    <input class="cf_inputbox required validate-email" maxlength="150" size="40" id="text_4" name="text_4" type="text">
  </div>
  <div class="clear"> </div>
  <div class="clear"> </div>
  <div class="clear"> </div>
</div>

<div  class="form_item">
  <div class="form_element2 cf_button">
    <input value="Get Your FREE Guide" name="undefined" type="submit">
  </div>
  <div class="clear"> </div>
  <div class="clear"> </div>
</div>

</div>
</center>

Hi jpoz,

The immediate problem is this entry in style1.css

.form_item {
height:20px;
}

The 20px doesn't leave enough room for the fields to expand.

There is something else odd though - when I set this to 'auto' one of the divs becomes enormously long and extends to the foot of the modules in the right hand column. This is linked to the <div class='clear'> entries, you may need to remove some of them to get the form layout to behave correctly.

Bob

Thanks Bob, I can try different settings to get it to work. I didn't even know where to start to look so your guidance is great.

One point related to all this that I did want to point out and left out of my original post. In the Validation tab for the Form, it makes no difference at all whether I have Enable Validation set to Yes or No. The form still does the validation regardless of the setting.

[attachment=0]validationsetting.jpg[/attachment]

Hi jpoz,

No, this should be your browser cache or site cache, the switch works for sure!🙂

Cheers
Max

Max,

I cleared FF cache, cookies, internet pages, etc (everything) and still doesn't work. So it might be site cache but I don't know what that means. Where can I go and clear that out.

Also, how is this validation on/off flag suppose to work. Even though my Form Code has class as "required", that flag is suppose to be smart enough to remove that class setting if I set to flag to off? I usually try to look at code to help debug but I have no idea how this is suppose to work.

Hi jpoz,

I think that I'm right in saying that if you manually add the validation classes then the switch has no effect. It decides if ChronoForms will assign classes automatically using the entries on the Validation Tab. If you want or need to set them yourself then turn it off. You may also then need to add the validation 'trigger' code to your form manually.

Bob

Hi Bob,

you are correct, the switch function is to add the classes to the fields if its enabled, but if the classes are there then the switch will do nothing!

Regards
Max

HI Jpoz,

Correcting my previous post a little. If you add validation classes manually then you should not make any entries for the same fields in the Validation tab or a second class may be added. You should set the Validation switch ON to make sure that the JavaScript snippet that triggers the validation is included in the page code.

Bob