Forums

Radio Box custom JS validation

Gianpaolo64 28 Oct, 2013
Hello,
on a form I am building I need to limit users to submit the form only when the radio box selection is "Yes", in case they select "No" I have to display a custom message.
Following this FAQ I tried a custom validation JS but the first problem is that I didn't find the Class field in the radio box element. So I tried to add a custom element with the radio inside it and that class attribute set to the correct value.
Of course it doesn't work.
The custom validation code when added to a text box works correctly.
I am using ChronoForms Version 4.0.2
Here is my form:
http://www2.exel.it/index.php?option=com_chronoforms&tmpl=component&chronoform=Prova
Any help is appreciated.
Thanks.
Gianpaolo
GreyHead 30 Oct, 2013
Hi Gianpaolo,

Part of your problem here is that radio buttons always have a value and it never normally changes. You need to test if it is 'checked' or not.

Here is one possible solution:

a) Add an id to the Submit button id='submit_btn'.

b) Put your message in a Custom Element element using a div with id='my_message'

c) Add code like this to a Load JS action
window.addEvent('domready', function() {
  $('submit_btn').disabled = true;
  $('privacy2_0').addEvent('change', checkPrivacy);
  $('privacy2_1').addEvent('change', checkPrivacy);

  function checkPrivacy() {
    if ( $('privacy2_1').checked ) {
      $('submit_btn').disabled = false;
      $('my_message').hide();
    } else {
      $('submit_btn').disabled = true;
      $('my_message').show();
    }
  });
});
!! not tested and may need to be debugged !!

Bob
Gianpaolo64 04 Nov, 2013
Thanks for the hint, I understand the logic of your code and I will implement it.
This topic is locked and no more replies can be posted.