CF V4 Validation - one of more text boxes required?

Hi All,

Is it possible to have validation on a "group of text boxes"?

For example, if I have 3 text boxes, one each for Home, Work and Mobile/cell phone - Is it possible to have the built in onBlur validation (which is working very nicley else where ont he form) validate to make atleast one of these 3 required?

Note: The form was built in the code window, not with the wizard and can not be rebuilt in wizard, too much custom stuff going on.

Form phone section code:

<div class="numbers">
  <h4>Contact No:</h4>
  <p>
    <label>Home:</label>
    <input type="text" name="PhoneHome" id="PhoneHome" class="validate['required']" title="At least one contact number is required, if only one is listed, please put it in the Home Number field"/>
    <label>Work:</label>
    <input type="text" name="PhoneBuisness" id="PhoneBuisness" />
    <label>Mobile:</label>
    <input type="text" name="PhoneMobile" id="PhoneMobile" />
  </p>
</div>

As you can see at the moment the form just has HOME as required and says that if you only have one contact number then to enter it in Home, regardless if its work or mobile/cell. This is a cheap temporary way around, but ultimately it should be done properly.

Any help would be greatly appreciated!

-A

Hi a.carter,

You can add a Custom Validation in a Load JS action in the On Load event.

function customReqGroup(){
  
  if ( $('PhoneHome') == '' && $('PhoneBuisness') == '' && $('PhoneMobile') == ''  ) {
    el.errors.push("Please add at least one phone number");
    return false;
  } else {
    return true;
  }
}

and add this in the Class box of one of the inputs:

validate['required','%customReqGroup']

Bob

Hi Bob,

Thank you for you answer! it was a great help. Unfortunately your code didn't quite work as expected I believe because your mootools selectors are the wrong way around should be $('PhoneHome') = '' rather than $('') == 'PhoneHome' etc.

However, after fixing it and getting it to work I ended up re writing it based on another answer in the forum that I came across:

function eitherOr(el){
  el.validation.erase('required');
  if ( !$('PhoneHome').value && !$('PhoneMobile').value && !$('PhoneBusiness').value ) {
    el.validation.push("required");
    el.errors.push("Please enter a contact number");	
    return false;
  } else {
    return true;
  }
}

Now this, appears to be working if my form doesn't have onBlur validation and just onSubmit validation.

However, I need onBlur for this form. Therefore, when I tab off of PhoneHome field leavnig it blank an error dialog appears. Great, all good, because all fields are still empty. However, when I now enter a number for PhoneMobile and tab off to the next field the error div/bubble is still visible. Now, if I submit the form it does work and submits. In theory the validation is all working and correct (atleast it appears so, I haven't test all possible scenarios yet).

I just need to be able to erase validation error messages onBlur from the pervious field when I enter a number in the next field in the "group".

I hope that makes sense?

Basically i'm trying to find the opposite of "el.error.push" so that I could do something like this:

Here's my crude example:

if (el.name == 'PhoneHome') { $('PhoneMobile').errors.erase(???); $('PhoneBusiness').errors.erase(); }
if (el.name == 'PhoneMobile') { $('PhoneHome').errors.erase(???); $('PhoneBusiness').errors.erase(); }
if (el.name == 'PhoneBusiness') { $('PhoneHome').errors.erase(???); $('PhoneMobile').errors.erase(); }	

Do you happen to know how to clear/erase/reset a validation error message?

Any help is greatly appreciated!

Hi a.carter,

Apologies for my typos :-(

I don't' see an obvious way of removing a single error flag but there is a formcheck.reinitialize('forced'); method that removes 'all' errors and this might do what you need.

Bob