Forums

Hi, i can't enable/disable required fields with livevalidation.
Can you help me please?

<?php
// Show/Hide Fields
$script = "
window.addEvent('domready', function() {
        $('tipo_cliente_1').addEvent('click', function(event) {
      if ( $('tipo_cliente_1').checked === true ) {
         $('rag_sociale_div').setStyle('display', 'block');
         $('p_iva_div').setStyle('display', 'block');
         var text_0 = new LiveValidation('text_0');
         text_0.enable();
         var text_1 = new LiveValidation('text_1');
         text_1.enable();
      }
   });
   $('tipo_cliente_0').addEvent('click', function(event) {
      if ( $('tipo_cliente_0').checked === true ) {
         $('rag_sociale_div').setStyle('display', 'none');
         $('p_iva_div').setStyle('display', 'none');
         var text_0 = new LiveValidation('text_0');
         text_0.disable();
         var text_1 = new LiveValidation('text_1');
         text_1.disable();
      }
   });
})
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration( $script );
?>
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 130px;">Quantità <span style="color: #3B8987;font-weight:bold;">*</span></label>
    <select class="cf_inputbox validate-selection" id="select_5" size="1" title="Scegliete una quantità."  name="numero_camere">
    <option value="">Scegliete una quantità</option>
      <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

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

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 130px;">Azienda/privato <span style="color: #3B8987;font-weight:bold;">*</span></label>
    <div class="float_left">
      <input value="Privato" title="Indicate se Privato o Azienda." class="radio validate-one-required" id="tipo_cliente_0" name="tipo_cliente" type="radio" />
      <label for="tipo_cliente_0" class="radio_label">Privato</label>
      <br />
      
<input value="Azienda" title="Indicate se Privato o Azienda." class="radio validate-one-required" id="tipo_cliente_1" name="tipo_cliente" type="radio" />
      <label for="tipo_cliente_1" class="radio_label">Azienda</label>
      <br />
      

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

<div class="form_item" id="rag_sociale_div" style="display:none">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 130px;">Ragione Sociale <span style="color: #3B8987;font-weight:bold;">*</span></label>
    <input class="cf_inputbox required validate-alphanum" maxlength="100" size="30" title="Indicate la Ragione Sociale." id="text_0" name="rag_sociale" type="text" />
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item" id="p_iva_div" style="display:none">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 130px;">Partita IVA <span style="color: #3B8987;font-weight:bold;">*</span></label>
    <input class="cf_inputbox required validate-number" maxlength="11" size="30" title="Indicate la Partita IVA." id="text_1" name="p_iva" type="text" />
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input style="position: relative; left: 220px;" class="button" value="Invia" name="button_17" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

When i switch from the first radio button to the second and submit the form then error messages disappear but the form still works with validation (required fields).
I think i miss some parameters on livevalidation functions.

Hi rainbow,

From a quick look I think that part of the problem is that you are re-declaring the LiveValidations each time. Set the validations once on pageload/domready then just do the enabling/disabling onclick.

Bob

Ok Bob, i followed your tip and i changed the code

<?php
// Show/Hide Fields
$script = "
window.addEvent('domready', function() {
   var text_0 = new LiveValidation('text_0');
   var text_1 = new LiveValidation('text_1');
   $('tipo_cliente_1').addEvent('click', function(event) {
      if ( $('tipo_cliente_1').checked === true ) {
         $('rag_sociale_div').setStyle('display', 'block');
         $('p_iva_div').setStyle('display', 'block');
         text_0.enable();
         text_1.enable();
      }
   });
   $('tipo_cliente_0').addEvent('click', function(event) {
      if ( $('tipo_cliente_0').checked === true ) {
         $('rag_sociale_div').setStyle('display', 'none');
         $('p_iva_div').setStyle('display', 'none');
         text_0.disable();
         text_1.disable();
      }
   });
})
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration( $script );
?>

Now everythink works well with firefox, while ie complaints error 0
"Property or method not supported by the object" for /components/com_chronocontact/js/livevalidation_standalone.js
and /media/system/js/mootools.js and on submit it skips each validation.

I prefer firefox, but there are people still using ie.
Can you give another look to my code please?
Thanks.

Hi rainbow,

It could be 'domready' that IE doesn't like. You can switch it for the non-MooTools equivalent (load?? or pageload??). Or, if you search on domready you should find a couple of threads here where I posted some code with a browser sniffer that serves up that version to IE and 'domready' to everything else.

Bob

Thanks Bob,i'll try your suggestions later.

I replaced "domready" with "load" like here
http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=4&t=15925&p=40809&hilit=domready+replace#p40809

Now ie complaints error 0 ("Property or method not supported by the object") only for /components/com_chronocontact/js/livevalidation_standalone.js
No problem with firefox.

I found your hack here
http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=17&t=14718&p=34586&hilit=browser+sniffer#p34586
but i don't know how it can fix this behavior with ie.

Thanks Bob for your effort, i'll try another solution later.

With this

<?php
// Show/Hide Fields
jimport('joomla.environment.browser');
$browser = JBrowser::getInstance();
if ( $browser->getBrowser() == 'msie' ) {
  $loader = 'load';
} else {
  $loader = 'domready';
}
$script = "
window.addEvent('$loader', function() {
    var text_0 = new LiveValidation('text_0');
    var text_1 = new LiveValidation('text_1');
    $('tipo_cliente_1').addEvent('click', function(event) {
         if ( $('tipo_cliente_1').checked === true ) {
         $('rag_sociale_div').setStyle('display', 'block');
         $('p_iva_div').setStyle('display', 'block');
         text_0.enable();
         text_1.enable();
      }
   });
   $('tipo_cliente_0').addEvent('click', function(event) {
      if ( $('tipo_cliente_0').checked === true ) {
         $('rag_sociale_div').setStyle('display', 'none');
         $('p_iva_div').setStyle('display', 'none');
         text_0.disable();
         text_1.disable();
      }
   });
})
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration( $script );
?>

error messages miss on submit with ie.

Can you move this topic to ChronoForms Bugs please?

Hi rainbow,

I could but I don't see any ChronoForms bug here. There's a problem with implementing LiveValidation but no bug there either; or is it the MooTools 'domready' bug?

Bob

Ok GreyHead, is there a way to solve this without livevalidation in an easy way (simple javascript functions)?
I need to view error messages on required validation on internet explorer too.
I can't find a workaround, i appreciate any client side suggestion, thanks.
http://chronoengine.com/forums.html?cont=posts&f=2&t=16408

It seems that internet explorer complaints declaring the LiveValidations

var text_0 = new LiveValidation('text_0');
var text_1 = new LiveValidation('text_1');

I have no time to test livevalidation with internet explorer so i solved with traditional javascript
http://chronoengine.com/forums.html?cont=posts&f=2&t=16408
firefox is always the best!