Forums

In a form I need to give a visitor the choice between uploading a file (to attache in a mail) or send it by post.

Therefor I made two radio buttons ("upload" and "post"). Checking one of the radio buttons is required.

If "upload" is checked a file-upload field is shown and required.
If "Post" is checked the file-upload field is not shown and should not be required.

I am not a developer so after a whole day of searching these forums I came up with this. (I know 'tables', shame on me) ;-)

Form code (only the part for this forum thread)

<?php
$doc =& JFactory::getDocument();
$script = "window.addEvent('domready', function() {
        $('fileupload').setStyle('display', 'none');
        $('upload').addEvent('click', function(event) {
      if ( $('upload').checked === true ) {
         $('fileupload').setStyle('display', 'block');
      }
   });
   $('post').addEvent('click', function(event) {
      if ( $('post').checked === true ) {
         $('fileupload').setStyle('display', 'none');
      }
   });
        
});
";
$doc->addScriptDeclaration( $script );
?>
<table class="cform" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td class="cf_titlefield" valign="top">Naam van de hond</td>
    <td valign="top"><input class="cf_inputbox required" maxlength="150" size="40" id="naamhond" name="naamhond" type="text" value="<?php echo $_POST['naamhond']; ?>" /></td>
  </tr>  
  <tr>
    <td class="cf_titlefield" valign="top">Kopie van de stamboom</td>
    <td valign="top">
    <input value="Upload" class="radio validate-one-required" id="upload" name="stamboom" type="radio" /> als bijvoegsel uploaden <input class="cf_inputbox" size="20" id="fileupload" name="fileupload" type="file"><br />
    <input value="Post" class="radio" id="post" name="stamboom" type="radio" />
    per post opgestuurd</td>
  </tr>

  <tr>
    <td class="cf_titlefield" valign="top">Geslacht </td>
    <td valign="top"><input value="Reu" class="radio validate-one-required" id="reu" name="geslacht" type="radio" /> Reu<br />
    <input value="Teef" class="radio" id="teef" name="geslacht" type="radio" /> Teef</td>
  </tr>
    <tr>
  	<td class="cf_titlefield" valign="top"> </td>
    <td valign="top"><input value="Verzend" name="undefined" type="submit" /></td>
  </tr>
</table>

Server Side validation Code: (Validation tap)

<?php
if(!is_file($_FILES['fileupload']['tmp_name'])) return "you must upload some file";
?>

2 Problems occur.

Problem 1: The file upload field is allways required now. How can I make it only required when the "upload" radio is checked.
Problem 2: I managed to repopulate the "naamhond" field when the file upload error returned an empty form but how to do that with the radio buttons that where already checked by the user.

Someone, please help me out?

I received a solution on my second problem in another thread.

If you are on a recent release then there's a switch on the Anti_Spam tab to let ChronoForms try to replublish. This is simpler than writing your own code.

Hi mackirony,

I have a problem with the new Validation code that ChronoForms is using. With the old version it was enough to change the class to change the validation. The new model attachs events to teh inputs based on the class settings when the page was created. There are methods to change these but I have yet to work out how to apply them to the events.

I'll post in the forums once I've worked it out.

Bob

PS You may need to add } else { clauses in your Javascript to reset the input values if the user changes their mind!

Thanks for your reply Bob but I don't understand what you are saying. sorry for that.

As I mentioned, I am not a coder. Dough I am learning rapidly ;-)

I found the php coding on these forums, as far as I can see there is no java code here.

The php coding in the form code is only to show the file-upload field when the right radio button is checked. I used this because I read somewhere the validation doesn't apply on hidden fields. In this case (probably because it is server site validation) this is not the case. The file upload stays required even when it is not displayed. Therefor I'm planning on removing the block PHP coding and just keep the file-upload field always showing.

However, I tried adapting this block of coding so it would change the name of the file-upload field according to what radio button is checked so the server site validation coding would only apply when needed but I was not able to do that. I'm not even sure if "fileupload" in the string is referring to the 'name' or the 'ID' of the file-upload field.

My logic was: If the php coding in my form code can change the "style" tag according to what radio button is checked it should be possible to change the "name" or "ID" tag so the server site validation coding would only apply when the "name" or "ID" is the same as in the string (this case "fileupload").

I'm probably going at this from the wrong approach.

About repopulating fields and rechecking radio buttons you all ready gave me an answer witch - in a quick test - seems to work.

Hi mackirony,

to make a field validation dependent on another i think we can use this:

    <?php
    $script = "
    var fileupload = new LiveValidation('fileupload');
    fileupload.add( Validate.Presence );
	if ( $('upload').checked === true ) {
	fileupload.enable();
	}
	if ( $('post').checked === true ) {
	fileupload.disable();
	}
    ";
    $script = "
    window.addEvent('domready', function() {
      $script
    });
    ";
    $doc =& JFactory::getDocument();
    $doc->addScriptDeclaration($script);
    ?>

Cheers
Max

Hi Max,

Thanks for your support!

Mush to my dismay I have to tell you this doesn't work. The fileupload stays required when 'post' is checked and (strangely) repopulating and rechecking the radio buttons (after error) doesn't work anymore with your code.

try to remove any validation set to this field from the form setup, as if its non validated by default because we are adding the validation to it here and setting this up 2 times may make problems!

Cheers
Max

I'm not sure what you mean.

This time I turned off the server site validation in the "validation" tab and removed the code from 'Server Side validation Code.

"Enable Validation" is on and "Validation Library" is set to 'mootools'. There is no reference to the file upload field in the other fields in the 'Validation' tab.

I replaced my php code in the form code with yours.

This doesn't do anything. The file upload is never required.

Am I doing something wrong?

Hi mackirony,

the server side validation has nothing to do with this now so you can leave it there enabled!

check if the file field has a "required" class ? if so then remove it! is the file field has a name and id "fileupload" ?

Cheers
Max

Hi max,

I see. That brings us back to the first test with your code. I haven't changed the name and ID, nor the class witch has no validation in it. (Just for the heck of it I also tried removing the class alltogether).

So, servesite validation is on and has this code:

<?php
if(!is_file($_FILES['fileupload']['tmp_name'])) return "you must upload some file";
?>

And I placed your code on top of my form code where the PHP block shown in my first post used to be. Like this:

<?php
    $script = "
    var fileupload = new LiveValidation('fileupload');
    fileupload.add( Validate.Presence );
   if ( $('upload').checked === true ) {
   fileupload.enable();
   }
   if ( $('post').checked === true ) {
   fileupload.disable();
   }
    ";
    $script = "
    window.addEvent('domready', function() {
      $script
    });
    ";
    $doc =& JFactory::getDocument();
    $doc->addScriptDeclaration($script);
    ?>
<input value="Nederlands" id="taal" name="taal" type="hidden" />
<div class="componentheading">Inschrijvingsformulier - 17e dag van de Rhodesian Ridgeback 2009</div>
<table class="cform" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2" valign="top" class="cf_insetfield">Verplichte velden: <span style="color:#FFFF00"><strong>*</strong></span></td>
  </tr>

  <tr>
    <td class="cf_titlefield" valign="top"><span style="color:#FFFF00"><strong>* </strong></span>Naam van de hond</td>
    <td valign="top"><input class="cf_inputbox required" maxlength="150" size="40" id="naamhond" name="naamhond" type="text" /></td>
  </tr>  
  <tr>
    <td class="cf_titlefield" valign="top"><span style="color:#FFFF00"><strong>* </strong></span>Kopie van de stamboom</td>
    <td valign="top">
    <input value="Upload" class="radio validate-one-required" id="upload" name="stamboom" type="radio" /> als bijvoegsel uploaden <input size="20" class="cf_inputbox" id="fileupload" name="fileupload" type="file"><br />
    <input value="Post" class="radio" id="post" name="stamboom" type="radio" />
    per post opgestuurd</td>
  </tr>

  <tr>
    <td class="cf_titlefield" valign="top"><span style="color:#FFFF00"><strong>* </strong></span>Geslacht </td>
    <td valign="top"><input value="Reu" class="radio validate-one-required" id="reu" name="geslacht" type="radio" /> Reu<br />
    <input value="Teef" class="radio" id="teef" name="geslacht" type="radio" /> Teef</td>
  </tr>
    <tr>
  	<td class="cf_titlefield" valign="top"> </td>
    <td valign="top"><input value="Verzend" name="undefined" type="submit" /></td>
  </tr>
</table>

This makes the file upload always required. Even when 'post' is checked. I can see the logic in your code but I am under th impression it's not doing anything. Could there be an error in it...maybe?

Hi Mackirony & Max,

The LiveValidation approach doesn't work because this code loads in the head before the main LiveValidations which then over -write this one. You can do it with straightforward MooTools JavaScript and I have this snippet working on Mackirony's form in FireFox.

<?php
$script = "
  var uploadcheck  = function() {
    if ( $('upload').checked === true ) {
      $('fileupload').disabled = false;
    }
    if ( $('post').checked === true ) {
      $('fileupload').disabled = true;
    }
  };
  $('post').addEvent('change', uploadcheck);
  $('upload').addEvent('change', uploadcheck);
";
$script = "
  window.addEvent('domready', function() {
    $script
  });
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>

This defines the check as a function and adds the function as an onChange event to both of the radio button inputs.

Bob

PS The style of writing the PHP - wrapping the $script up at the end isn't strictly necessary here but is really useful when you have several snippets on in your form code as it neatly packages them into the page head for execution onDomready.

Hi Bob,

Thanks again,
if you made this work somewhere can you pleas tell me how? I replaced your code with the previous one in the form code and have the same result. File upload is still always required. (even when 'post' is checked) 😢

Hi Bob,

not sure how it over writes it but we don't have any validation set for the file upload field!

@mackirony, tru to clear your browser cache and reload the page and check Bob's code!

I also think that my code has some problems, here is a revised version mixed with Bob's code, the file upload field is "required by default" UNLESS you check the post checkbox!

<?php
$script = "
var fileupload = new LiveValidation('fileupload');
    fileupload.add( Validate.Presence );
  var uploadcheck  = function() {
    if ( $('upload').checked == true ) {
      fileupload.enable();
    }
    if ( $('post').checked == true ) {
      fileupload.disable();
    }
  };
  $('post').addEvent('change', uploadcheck);
  $('upload').addEvent('change', uploadcheck);
";
    $script = "
    window.addEvent('domready', function() {
      $script
    });
    ";
    $doc =& JFactory::getDocument();
    $doc->addScriptDeclaration($script);
    ?>

let us know!

Cheers
Max

Hi Mackirony,

Here's a backup copy of the form snippet that I made - remove the .txt and 'restore it' into ChronoForms. Tested in FireFox and working OK - not tested in IE but the code should be OK.

Bob

I've been at this all day but whatever I do file upload stays required every time.

I tried Max's code. Made sure my browsers cache is empty every time.

I tried Bob's backup copy.

Because I was still working in version 3.0 stable so I made a copy of the website on another web space, updated Chronoforms to RC5 and tried everything again.

Same result every time😢



I could give you administrator access to this copy website if it helps.
Anyway your eagerness to help me is impressive so I will be getting a license soon.

Hi mackirony,

Ah but that's a server-side validation message I think. You need to alter your server side validation code to check what the radio button setting is.

Bob

yes,yes, it's a message generated by this line of code in the 'validation' tap at 'server site validation' I assume (see my previous posts):

<?php
if(!is_file($_FILES['fileupload']['tmp_name'])) return "you must upload some file";
?>

I was under the impression that was obvious. The problem is, I found it somewhere in these forums and got it working just by changing the field name. My coding knowledge is not sufficient to adapt it to work in this case. Maybe you or Max could shine some light on this?...please :?

Man I never realized this was going to be this complicated.

Hi mackirony,

Sorry, don't always get the time to read back a dozen posts, if the last couple are talking about JavaScript I tend to assume that's the theme of the next one.

Try something like this:

<?php
$upload = JRequest::getVar('upload', '', 'post');
if( $upload && !is_file($_FILES['fileupload']['tmp_name']) ) return "you must upload some file";
?>

You may need to check with Debug on and see what 'upload' actually returns but I think this should be OK.

Bob

Oh no Bob, I gave you the wrong impression. There is no need for apologies what so ever ;-)

I did a quick test and apparently it seems to work. Except, it doesn't show the error message ("you must upload some file") in the server site validation code.

<?php
$upload = JRequest::getVar('upload', '', 'post');
if( $upload && !is_file($_FILES['fileupload']['tmp_name']) ) return "you must upload some file";
?>

If the 'upload' radio button is checked and there is no file selected the submit button just doesn't do anything. Apart from that it works very nicely. But only in the RC5 version not in 3.0 stable.

I will try some more tests this evening when I'm at home.

Update: Tried it again at home and came to the same conclusion as described above.
This is what i got with debugging on (filtered out some sensitive information)

[quote] 1. Form passed first SPAM check OK
2. Form passed the submissions limit (if enabled) OK
3. Form passed the Image verification (if enabled) OK
4. Form passed the server side validation (if enabled) OK
5. $_POST Array: Array ( [taal] => Nederlands [naamhond] => Naam van de hond [stamboom] => Upload [geslacht] => Reu [undefined] => Verzend [ef49d8f67dddfdb951155aca3df301f6] => 1 )
6. $_FILES Array: Array ( [fileupload] => Array ( [name] => #6 Adding file upload to a form.pdf [type] => application/pdf [tmp_name] => /tmp/phpR1Nt6n [error] => 0 [size] => 513719 ) )
7. Upload routine started for file upload by : fileupload
8. path/components/com_chronocontact/uploads/fileuploads/20090511190513_6Addingfileuploadtoaform.pdf has been uploaded OK
9. Form passed the plugins step (if enabled) OK
10. An email has been SENT successfully from (BRRC - website)email to email,
11. Debug End[/quote]

Hi Mack,

Please remove any code we tried earlier, it will not work without a core update, maybe retry it with RC5.1

Bob's code should validate that a file is uploaded if the upload radio is checked and form posted!

Regards,
Max

But it works in RC5. The only thing left is the error "you must upload some file" witch is not showing. When the user forgets to select a file while the upload radio button is checked the submit button just does nothing. Apart from not showing the message why it won't submit everything works fine.

Hi Mack,

I wonder if this is some PHP quirk, try spelling the code out in more detail

<?php
$upload = JRequest::getVar('upload', '', 'post');
$message = "";
if( $upload && !is_file($_FILES['fileupload']['tmp_name']) ) {
    $message =  "you must upload some file";
}
return $message;
?>

Bob

But it works in RC5. The only thing left is the error "you must upload some file" witch is not showing. When the user forgets to select a file while the upload radio button is checked the submit button just does nothing. Apart from not showing the message why it won't submit everything works fine.

Hi Mackirony,

indeed if the button doesn't work then this is some JS and we are dealing with server side validation only here now so there is no reason for this to happen!

Regards,
Max

Sorry Bob,

Your last code does exactly the same. Everything works, the file upload field gets validated. Except the error message is not showing.

<?php
$upload = JRequest::getVar('upload', '', 'post');
$message = "";
if( $upload && !is_file($_FILES['fileupload']['tmp_name']) ) {
    $message =  "you must upload some file";
}
return $message;
?>

If you want you can find the form I'm testing on here: http://www.kimdevylder.be/brrc/upload-test.html
This is a copy of the live site so if it would help I could grand you administrator rights here.

Max, again I am sorry but does this mean it is not solvable until the next core update? I am kinda running out of arguments towards the people I am making this site for.

Hi Mack,

I can't get the form to submit without a file name in the box. What are you doing to test this error?

Bob

The same thing. I think we are have a communication difficulty here.

When the 'upload' ("als bijvoegsel uploaden") radio btt is checked and there is no file in the file upload box the form should not submit and show the sever-site-validation-error-message. Now, the form does not submit so I think this is right. It just doesn't show the sever-site-validation-error-message.

When the 'upload' ("als bijvoegsel uploaden") radio btt is checked and there is a file in the file upload box the form submits and everything goos as it should (file gets uploaded and attached to the mail)

If the 'post' ("per post opgestuurd") radio btt is checked there is no need for a file in the file upload box. So the form will submit without a file in the file upload box (at least with me it does).

My conclusion: everything works except the sever-site-validation-error-message doesn't show when the visitor checked the 'upload' ("als bijvoegsel uploaden") radio btt but forgot to link a file in the file upload box.

This is only a part of a mush larger form used for subscribing to a dog show. For people to be able to have their dog run in the show they have to send a document (pedigre). Some people have this document scanned so they should be able to send it with the on line form. Other people have the document only on paper so they can check the 'post' ("per post opgestuurd") radio btt to let the organiser know they will send the document by postal mail.

Hi Mack,

Understood - there is no server-side error message because the error is client-side. We need to add some JavaScript to show that the field is required.

I've added a second function in here (written from memory so will need debugging!). To have it work you need to add a div or span to hold the message

<div id='upload_message' style='font-weight:bod; color:red; display:none;' >Put your message here</div>

and you need to add id='submit' to the submit button.

If it works then it should show the message when the submit button is clicked if upload is selected and the filed is empty.

<?php
$script = "
//var fileupload = new LiveValidation('fileupload');
//    fileupload.add( Validate.Presence );
  var uploadcheck  = function() {
    if ( $('upload').checked == true ) {
      fileupload.enable();
    }
    if ( $('post').checked == true ) {
      fileupload.disable();
    }
  };
  $('post').addEvent('change', uploadcheck);
  $('upload').addEvent('change', uploadcheck);
  var filenamecheck = function() {
    if ( $('upload').checked == true && $('fileupload').value == '' ) {
      $('upload_message').setStyle('display', true);
  }
  $('submit').addEvent('click', filenamecheck);
";
    $script = "
    window.addEvent('domready', function() {
      $script
    });
    ";
    $doc =& JFactory::getDocument();
    $doc->addScriptDeclaration($script);
    ?>

Bob

Nope Bob, I did what you asked, added the code and we're back to square one. It doesn't do anything anymore. The form always submits. With or without a file linked to the upload field. 😢

This is the form code now:

<?php
$script = "
//var fileupload = new LiveValidation('fileupload');
//    fileupload.add( Validate.Presence );
  var uploadcheck  = function() {
    if ( $('upload').checked == true ) {
      fileupload.enable();
    }
    if ( $('post').checked == true ) {
      fileupload.disable();
    }
  };
  $('post').addEvent('change', uploadcheck);
  $('upload').addEvent('change', uploadcheck);
  var filenamecheck = function() {
    if ( $('upload').checked == true && $('fileupload').value == '' ) {
      $('upload_message').setStyle('display', true);
  }
  $('submit').addEvent('click', filenamecheck);
";
    $script = "
    window.addEvent('domready', function() {
      $script
    });
    ";
    $doc =& JFactory::getDocument();
    $doc->addScriptDeclaration($script);
    ?>
<input value="Nederlands" id="taal" name="taal" type="hidden" />
<div class="componentheading">Inschrijvingsformulier - 17e dag van de Rhodesian Ridgeback 2009</div>
<table class="cform" width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td colspan="2" valign="top" class="cf_insetfield">Verplichte velden: <span style="color:#FFFF00"><strong>*</strong></span></td>
  </tr>

  <tr>
    <td class="cf_titlefield" valign="top"><span style="color:#FFFF00"><strong>* </strong></span>Naam van de hond</td>
    <td valign="top"><input class="cf_inputbox required" maxlength="150" size="40" id="naamhond" name="naamhond" type="text" /></td>
  </tr> 
  <tr>
    <td class="cf_titlefield" valign="top"><span style="color:#FFFF00"><strong>* </strong></span>Kopie van de stamboom</td>
    <td valign="top">
    <input value="Upload" class="radio validate-one-required" id="upload" name="stamboom" type="radio" /> als bijvoegsel uploaden <input size="20" class="cf_inputbox" id="fileupload" name="fileupload" type="file"><div id='upload_message' style='font-weight:bod; color:red; display:none;' >Put your message here</div><br />
    <input value="Post" class="radio" id="post" name="stamboom" type="radio" />
    per post opgestuurd</td>
  </tr>

  <tr>
    <td class="cf_titlefield" valign="top"><span style="color:#FFFF00"><strong>* </strong></span>Geslacht </td>
    <td valign="top"><input value="Reu" class="radio validate-one-required" id="reu" name="geslacht" type="radio" /> Reu<br />
    <input value="Teef" class="radio" id="teef" name="geslacht" type="radio" /> Teef</td>
  </tr>
    <tr>
     <td class="cf_titlefield" valign="top"> </td>
    <td valign="top"><input value="Verzend" name="undefined" id="submit" type="submit" /></td>
  </tr>
</table>

This is the serverside validation:

<?php
$upload = JRequest::getVar('upload', '', 'post');
$message = "";
if( $upload && !is_file($_FILES['fileupload']['tmp_name']) ) {
    $message =  "you must upload some file";
}
return $message;
?>

Notice there is an error message for the file upload field in both scripts now. Surely that's not right. I'm not the one to easely give up but I think we are running into a loop.

Hi Mack,

There will be two messages because you are using two entirely separate validations. You have a client-side validation using JavaScript and a second more or less identical server-side validation using PHP. This is belt and braces stuff.

I'll look at the code again later - have you tried to debug it at all?

Bob

The serversite validation was left from code you gave a couple of posts ago. This almost nailed it. See previous post.

When the 'upload' ("als bijvoegsel uploaden") radio btt is checked and there is no file in the file upload box the form should not submit and show the sever-site-validation-error-message. Now, the form does not submit so I think this is right. It just doesn't show the sever-site-validation-error-message.

When the 'upload' ("als bijvoegsel uploaden") radio btt is checked and there is a file in the file upload box the form submits and everything goos as it should (file gets uploaded and attached to the mail)

If the 'post' ("per post opgestuurd") radio btt is checked there is no need for a file in the file upload box. So the form will submit without a file in the file upload box (at least with me it does).

My conclusion: everything works except the sever-site-validation-error-message doesn't show when the visitor checked the 'upload' ("als bijvoegsel uploaden") radio btt but forgot to link a file in the file upload box.

This is only a part of a mush larger form used for subscribing to a dog show. For people to be able to have their dog run in the show they have to send a document (pedigre). Some people have this document scanned so they should be able to send it with the on line form. Other people have the document only on paper so they can check the 'post' ("per post opgestuurd") radio btt to let the organiser know they will send the document by postal mail.

I tried figuring out myself what is wrong with the last code you gave but since I am not a devoloper I'm not seeing it. This is the message I get with debugging on when I submit the form with 'upload' ("als bijvoegsel uploaden") checked and an empty file upload field (this should not submit the form but give a validation error).

[quote] 1. Form passed first SPAM check OK
2. Form passed the submissions limit (if enabled) OK
3. Form passed the Image verification (if enabled) OK
4. Form passed the server side validation (if enabled) OK
5. $_POST Array: Array ( [taal] => Nederlands [naamhond] => naam van hond [stamboom] => Upload [geslacht] => Reu [undefined] => Verzend [21177462f75ce61abd91f889516089c8] => 1 )
6. $_FILES Array: Array ( [fileupload] => Array ( [name] => [type] => [tmp_name] => [error] => 4 [size] => 0 ) )
7. Form passed the plugins step (if enabled) OK
8. An email has been SENT successfully from (BRRC - website) email to email,email
9. Debug End[/quote]

I tried Googeling to get this solved but apparently I am the first one who needs this combination working. kinda hard to believe ;-)

Bob and Max.
A friend of mine (who is a developer) claims he can do this and is going to take a look at it. I'll post here, hopefully a solution. :wink:

Hi Mack,

This version of the Form HTML is debugged at least to the point where it shows the error message in FireFox.

<?php
$script = "
  var uploadcheck  = function() {
    if ( $('upload').checked == true ) {
      $('fileupload').disabled = false;
    }
    if ( $('post').checked == true ) {
      $('fileupload').disabled = true;
    }
  }
  $('post').addEvent('change', uploadcheck);
  $('upload').addEvent('change', uploadcheck);
  var filenamecheck = function() {
    if ( $('upload').checked == true && $('fileupload').value == '' ) {
      $('upload_message').setStyle('display', 'block');
    }
  }
  $('submit').addEvent('click', filenamecheck);
";
$script = "
window.addEvent('domready', function() {
$script
});
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>
    <input value="Nederlands" id="taal" name="taal" type="hidden" />
    <div class="componentheading">Inschrijvingsformulier - 17e dag van de Rhodesian Ridgeback 2009</div>
    <table class="cform" width="100%" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td colspan="2" valign="top" class="cf_insetfield">Verplichte velden: <span style="color:#FFFF00"><strong>*</strong></span></td>
      </tr>

      <tr>
        <td class="cf_titlefield" valign="top"><span style="color:#FFFF00"><strong>* </strong></span>Naam van de hond</td>
        <td valign="top"><input class="cf_inputbox required" maxlength="150" size="40" id="naamhond" name="naamhond" type="text" /></td>
      </tr>
      <tr>
        <td class="cf_titlefield" valign="top"><span style="color:#FFFF00"><strong>* </strong></span>Kopie van de stamboom</td>
        <td valign="top">
        <input value="Upload" class="radio validate-one-required" id="upload" name="stamboom" type="radio" /> als bijvoegsel uploaden <input size="20" class="cf_inputbox" id="fileupload" name="fileupload" type="file"><div id='upload_message' style='font-weight:bold; color:red; display:none;' >Put your message here</div><br />
        <input value="Post" class="radio" id="post" name="stamboom" type="radio" />
        per post opgestuurd</td>
      </tr>

      <tr>
        <td class="cf_titlefield" valign="top"><span style="color:#FFFF00"><strong>* </strong></span>Geslacht </td>
        <td valign="top"><input value="Reu" class="radio validate-one-required" id="reu" name="geslacht" type="radio" /> Reu<br />
        <input value="Teef" class="radio" id="teef" name="geslacht" type="radio" /> Teef</td>
      </tr>
        <tr>
         <td class="cf_titlefield" valign="top"> </td>
        <td valign="top"><input value="Verzend" name="undefined" id="submit" type="submit" /></td>
      </tr>
    </table>

Bob

Hi Bob,

Thanks again for your effort!
Sorry but, this shows the validation-error-message briefly but still submits the form when the file upload field is empty.

I've been on the phone all evening with that friend and eventually we found out that this code...

<?php
$script = "
var fileupload = new LiveValidation('fileupload');
    fileupload.add( Validate.Presence );
  var uploadcheck  = function() {
    if ( $('upload').checked == true ) {
      fileupload.enable();
    }
    if ( $('post').checked == true ) {
      fileupload.disable();
    }
  };
  $('post').addEvent('change', uploadcheck);
  $('upload').addEvent('change', uploadcheck);
";
    $script = "
    window.addEvent('domready', function() {
      $script
    });
    ";
    $doc =& JFactory::getDocument();
    $doc->addScriptDeclaration($script);
    ?>

...provided by Max on page 1 of this thread probably would work if this part...

var fileupload = new LiveValidation('fileupload');
    fileupload.add( Validate.Presence );
  var uploadcheck  = function() {
    if ( $('upload').checked == true ) {
      fileupload.enable();
    }
    if ( $('post').checked == true ) {
      fileupload.disable();
    }
  };
  $('post').addEvent('change', uploadcheck);
  $('upload').addEvent('change', uploadcheck);

...would output between the two " }); " at the bottom of the large validation script near the bottom of the page. Instead of like this...

  <script type="text/javascript">

    window.addEvent('domready', function() {
      
var fileupload = new LiveValidation('fileupload');
    fileupload.add( Validate.Presence );
  var uploadcheck  = function() {
    if ( $('upload').checked == true ) {
      fileupload.enable();
    }
    if ( $('post').checked == true ) {
      fileupload.disable();
    }
  };
  $('post').addEvent('change', uploadcheck);
  $('upload').addEvent('change', uploadcheck);

    });
    
  </script> 

...in the header of the page. That's probably not possible without hacking the component and I don't really like to do that. This is probably (or hopefully) the reason why Max asked to wait for an update ;-)

Hi Mack,

Yes, that's exactly the reason why Max's code won't work. (I've posted about that in a couple of threads recently, apparently not in this one).

You said that the message was the only thing missing - now you want the submission stopped too - it probably needs one more line in my code to do that.

I still have no idea why you are using both server side and client side validation for this.

Bob

At first the form did not submit when the file upload was empty and the 'upload' radio button was checked. It's normal to expect a form not to submit when it's not validated. The only problem was that there was no way for the visitor to know why the form would not submit because there was no validation error showing.

Now, when the 'upload' radio button is checked and the file upload field is empty. (witch should not submit the form) it will show the validation error but it will still submit the form. So the error says something like "this field can not be empty" while the form still submits the empty field.

I don't know why there should be client side and server side validation. I tried taking the server site validation away but the Max said I have to leave it. Again I am not a developer, I'm trying everything within my knowledge to get this working but still my knowledge in scripting is limited. That's why I'm posting, searching and asking friends (who have bigger scripting knowledge) for help. I'm just hoping that one bright sunny day this issue will be solved with any kind of validation.

Just to be clear. I'm not criticizing. I am thankful for your efforts. I realize it is a free component (and I love it) but I need to get this working one way or another.

Hi Mack,

Exactly, it will not work without the core hack and switching 2 core code blocks because the validation is overwritten as Bob said!

this is fixed now in RC5.1, if you need a quick upgrade installer then let me know through the contact us page!

Cheers
Max

Sorry Max and Bob,

Sometimes it's not very clear for me what you are trying to say. I started realizing that you probably already said what we found out last night while I was writing the post. I would appreciate it if you could send me the update. Going to the contact form now.

Thanks again!
Kim

Eureka it works!

To finish this threat (hopefully) :wink: , this is what made it work:

1. Updated Chronoforms to 3.1 RC5.1
2. Added the script below to "Form JavaScript:" in the "Form Code" tap.

window.addEvent('domready', function() {
var fileupload = new LiveValidation('fileupload');
    fileupload.add( Validate.Presence );
  var uploadcheck  = function() {
    if ( $('upload').checked == true ) {
      fileupload.enable();
    }
    if ( $('post').checked == true ) {
      fileupload.disable();
    }
  };
  $('post').addEvent('change', uploadcheck);
  $('upload').addEvent('change', uploadcheck);	
	});

Thanks Max and Bob!

Hi Mack.

Great, well done for hanging in there. Looks like 5.1 will be an important improvement for other users needing custom validation too.

Bob

Hi Bob, yes, now the JS code runs after the validation is defined so the JS code overrides it! 🙂

Thanks Mack for posting this for everybody here!🙂

Regards
Max

Hi,

After hours searching I finally found this post.
Thanks for this. It helped a lot.

I do have a question/problem with adding validation to a group of radiobuttons.
So how can we add a validation to a group of radiobuttons.
I don't think the Validate.Presence work with radio buttons.

.add( Validate.Presence );

I tried something else but it didn't work. I do see with firebug that "validate-one-required" is added but I can still send the form.
I my case you can choose to upload a video or choose one of the new group of radio buttons.

  var fileupload = new LiveValidation('video');
  fileupload.add( Validate.Presence );
  var uploadcheck  = function() {
    if ( $('video_or_poster1').checked == true ) {
      fileupload.enable();
      $('poster201').removeClass("validate-one-required");
      $('poster202').removeClass("validate-one-required");
      $('poster203').removeClass("validate-one-required");
      $('poster204').removeClass("validate-one-required");
      $('poster205').removeClass("validate-one-required");
      $('poster206').removeClass("validate-one-required");
      $('poster207').removeClass("validate-one-required");
      $('poster208').removeClass("validate-one-required");
      $('poster209').removeClass("validate-one-required");
      $('poster210').removeClass("validate-one-required");
      $('poster211').removeClass("validate-one-required");
      $('poster212').removeClass("validate-one-required");

     }
     if ( $('video_or_poster2').checked == true ) {
       fileupload.disable();
        $('poster201').addClass("validate-one-required");
        $('poster202').addClass("validate-one-required");
        $('poster203').addClass("validate-one-required");
        $('poster204').addClass("validate-one-required");
        $('poster205').addClass("validate-one-required");
        $('poster206').addClass("validate-one-required");
        $('poster207').addClass("validate-one-required");
        $('poster208').addClass("validate-one-required");
        $('poster209').addClass("validate-one-required");
        $('poster210').addClass("validate-one-required");
        $('poster211').addClass("validate-one-required");
        $('poster212').addClass("validate-one-required");
     }
   };

So how can I make at least one required when somenone chooses not to upload a video.

Any help is highly appreciated.

Regards,

SaGo

Hi SAGO,

Just checking some old posts and found this. There was a bug with the validation of radio button and checkbox groups which I think is now fixed in the latest versions of ChronoForms v4.

Bob

Hi,

Thanks for keeping me posted.
I'll check it out then in the new version.

Cheers,

SaGo