Forums

Regards @all,

I just purchased the 3 domains validation of chronoforms and now I have to build a form with following behaviour:

I have two radio boxes whoose options decide wheter the one or the other text box is required to be filled in.

How can this be done?
Thank you a lot.

Hi lichtimc,

You can do that with JavaScript, there is some similar code in this FAQ that may help.

Bob

Thanks a lot, this worked like a charm!

Now it's already possible to js-alert me, if the fiels are not properly filled in.

But it would be even smarter, if the behaviour of showing me the error message would be more integrated.

What I mean is, that there is a beautiful bubble, if one of the required fields is missing. Is it possible to invoke this bubble within my script, instead of the error-alert?



Thanks a lot for your answer!

Hi lichtimc,

Yes, add the normal validation class to the input but when your JavaScript hides it disable the input, then re-enable it when it is displayed. (I also remove any value when it is hidden.)

Bob

Hi lichtimc,

Yes, add the normal validation class to the input but when your JavaScript hides it disable the input, then re-enable it when it is displayed. (I also remove any value when it is hidden.)

Bob

I already had this thought, but the problem in my case is the following: I want the fields both to be displayed. Only the required-option should switch between the two fields. For this reason I cannot disable it...

I can't get a field to not be required dynamically. Hope you understand what I mean...
Do you know of a possibility?

Thanks again for your help!

Hi lichtimc,

You can use the .register() and dispose() methods - see the three functions toward the end of the code in this example.

Bob

PS I don't remember now how I got the name of the FormCheck object there, I think it's just related to the form name.

Hi Bob,

thank you very much. Works perfectly fine now... 🙂

For later reference here my code:
(select = radioboxes-div; FORMULAR_NAME = name of the form; INPUT_RADIO = name of radiobox-group)

window.addEvent('domready', function() {
  var select, email, sms, req;
  req = "validate['required']";
  select = $('DIV of the Radio-Boxes');
  email= $('input_text_email');
  sms= $('input_text_mobtnr');
  select.addEvent('click', Test_RadioBoxes);  

  function Test_RadioBoxes() {
    var checked = $$('input[name=INPUT_RADIO]:checked');
    if ( checked.length > 0 && checked[0].value == 'E-Mail' ) {
        makeRequired(email);
        makeOptional(sms);
    } else if ( checked.length > 0 && checked[0].value == 'SMS' ) {
        makeRequired(sms);
        makeOptional(email);
    }
  }

  function makeRequired(el){
    el.disabled = false;
    el.addClass(req);
    formCheck_FORMULAR_NAME.register(el);
  }
  function makeDisabled(el){
    el.disabled = true;
    el.setProperty('class', '');
    formCheck_FORMULAR_NAME.removeError(el);
    formCheck_FORMULAR_NAME.dispose(el);
  }
  function makeOptional(el){
    el.disabled = false;
    el.setProperty('class', '');
    formCheck_FORMULAR_NAME.removeError(el);
    formCheck_FORMULAR_NAME.dispose(el);
  }
});

Regards, David