I want at least one of two fields to be required

Hello, I'm making contact form on my site and what I want is that user would be forced to fill at least one of two fields, e.g. land phone number, mobile phone number or both of them. Is there any way to do that?

Hi Hitko,

I think only with a little custom JavaScript.

Bob

Thanks for your reply, but since I know absolutely nothing about JS, could you explain how can I do that?

Hi hitko,

Possibly - what is the Form HTML for the inputs you want to check.

Bob

HTML code is here:

<div class="ccms_form_element cfdiv_text" id="telefon_container_div"><label>Telefon</label><input maxlength="150" size="30" class=" validate['phone']" title="" type="text" value="" name="input_text_15" MyReadOnlyAttr="false">
<div class="clear"></div><div id="error-message-input_text_15"></div></div><div class="ccms_form_element cfdiv_text" id="mobitel_container_div"><label>Mobitel</label><input maxlength="150" size="30" class=" validate['phone']" title="" type="text" value="" name="input_text_16" MyReadOnlyAttr="false">
<div class="clear"></div><div id="error-message-input_text_16"></div></div>

There are 2 text boxes, Telefon and Mobitel, 1st for land phone number and 2nd for mobile phone number. As I said, I want to make it necessary to fill at least one of them.

Hi hitko,

Here is your HTML re-formatted and with added ids

<div class="ccms_form_element cfdiv_text" id="telefon_container_div">
  <label>Telefon</label>
  <input maxlength="150" size="30" class=" validate['phone']" title="" type="text" value="" name="input_text_15" id="input_text_15" MyReadOnlyAttr="false">
  <div class="clear"></div>
  <div id="error-message-input_text_15"></div>
</div>
<div class="ccms_form_element cfdiv_text" id="mobitel_container_div">
  <label>Mobitel</label>
  <input maxlength="150" size="30" class=" validate['phone']" title="" type="text" value="" name="input_text_16" name="input_text_16" MyReadOnlyAttr="false">
  <div class="clear"></div>
  <div id="error-message-input_text_16"></div>
</div>

Also give the form submit button an id='submit_btn'
Then add this to a Load JS action:

window.addEvent('domready', function() {
  $('submit_btn').addEvent('click', function() {
    if ( $('input_text_15').value == '' && $('input_text_16').value == '' ) {
      $('error-message-input_text_15').setHTML('Please add your phone or email');
      $('error-message-input_text_16').setHTML('Please add your phone or email');
    } else {
      $('error-message-input_text_15').setHTML('');
      $('error-message-input_text_16').setHTML('');
    } 
  });
});

Not tested and will need debugging.

Bob

Well, I've added those IDs, loaded script you wrote and ... Nothing happened. Then when I've been reviewing the code, 1st I've noticed that there is input_text_15 twice in if condition and that input_text_16 doesn't appear there. Is it meant to be that way? However, when I've changed it to

( $('input_text_15').value == '' && $('input_text_16').value == '' )

it still wasn't working. It seems that the problem is that this script doesn't prevent form submission, but only changes the value of error message div.

Hi hitko,

Sorry about the typo.

I think that if you add return false; before } else { that will stop the form submitting.

Or you can possibly write a custom validation for FormCheck.

Bob

Well, it still doesn't work as it should and I'm thinking about giving only one box and write in instructions to input one or the other phone number although I don't like to do that.
I'd write the validation if I'd know how to code that (I know how to do that in C and in Java, but I don't know how to in JS) nor I know how validation checks are made and the way they work. So if you have time and will you can try to do that work and I'll be very happy, otherwise I'll just do it as I wrote above.
Thanks for your effort and time you spent so far trying to help me.