Either/ Or (Tel or E-mail fields)

Hello,
I would like to have users input either their telephone number or email address.

Is It possible to make a *one or the other* situation?

Thank you.🙂

Hi driv,

You mean in fields validation ? if yes then yes you can, but you will need a custom validation function, you will actually need 2 functions, one for each field, this FAQ should help you for the v4:
https://www.chronoengine.com/faqs/54-cfv4/cfv4-validation/2656-how-can-i-add-a-custom-client-side-validation.html

Regards,
Max

That is excellent news - thanks so much for responding.

It does however, lead to another question...
How can I find the appropriate regex referred to here: /Add regex for a test here/

function customCheck(el){
  if ( !el.value.test(/Add regex for a test here/) ) {
    el.errors.push("Add an error message here");
      return false;
  } else {
    return true;
  }
}

Thanks again.🙂

In this case you will not need a regex, instead an a comparison:

function customCheck(el){
  if (!el.value && !document.id("other_field_id").value) {
    el.errors.push("you need to enter either your email or phone");
      return false;
  } else {
    return true;
  }
}

You will need 2 of this with 2 different names, each one setup for one of the 2 fields to check both of them in both cases.

Regards,
Max

Thank you again - I do appreciate your responses.
However, I am unable to make this work.

I have added the function (above) to a Load JS action in the On Load event of the form.

I used telcheck and emailcheck as the IDs of the fields.
I added validate['required','%customCheck'] to the class boxes of each field.

However, it seems to me that the function is looking for other_field_id - so do I need to create two functions?
Actually, I tried this - each with the telcheck or emailcheck as IDs - but I couldn't get it to work.

Do you think you could explain where I am going wrong?

Thank you.

Please post the 2 functions you have!

Moreover, they should have 2 different names because they do 2 different checks depending on the field which does the trigger!

Regards,
Max

Hello,
I have 2 similar functions...

function telCheck(el){
  if (!el.value && !document.id("telcheck").value) {
    el.errors.push("you need to enter either your email or phone");
      return false;
  } else {
    return true;
  }
}

and

function emailCheck(el){
  if (!el.value && !document.id("emailcheck").value) {
    el.errors.push("you need to enter either your email or phone");
      return false;
  } else {
    return true;
  }
}

Then in email:
ID = emailcheck
class = validate['required','%emailCheck']

and in Telephone
ID = telcheck
class = validate['required','%telCheck']


Thank you.

Ok, the "other id" used inside the function should NOT match the function name, e.g, inside the "telCheck" you should use "emailCheck" to test the other field!

Regards,
Max

Hello again.

So I tried that and now have...

    function telCheck(el){
      if (!el.value && !document.id("emailcheck").value) {
        el.errors.push("you need to enter either your email or phone");
          return false;
      } else {
        return true;
      }
    }

and

 function emailCheck(el){
      if (!el.value && !document.id("telcheck").value) {
        el.errors.push("you need to enter either your email or phone");
          return false;
      } else {
        return true;
      }
    }

Then in the Email field:
ID = emailcheck
class = validate['required','%emailCheck']


and in the Telephone field:
ID = telcheck
class = validate['required','%telCheck']


Do I have the corect code here? ^^^^^^^


However, I still have the same result - in that when I try to submit the forum, it requires both fields to be filled in.

(I have deselected the individual Validation required checkboxes for tel & email fields.)

You should not have the "required" in both fields, so please change it to:

validate['%emailCheck']

ok - I have done that, validate['%emailCheck'] ...but now the form doesn't validate either field.

This is with the field validation checkbox not checked.
When I do check that box - it wants to validate both fields.

This is with the field validation checkbox not checked.

Sorry that should read...

This is with the Telephone & Email field validation checkboxes not checked.

Ok, please try to change the validation function in one of the functions to:

if (!el.value){

Does this make the field required ?

Hi - Neither field is required (as of the change).

I have changed the telCheck function to be like this...

function telCheck(el){
 if (!el.value){
    el.errors.push("you need to enter either your email or phone");
      return false;
  } else {
    return true;
  }
}

Everything else remains as previously stated.
Thanks.

You still don't get any errors ? if yes then please add:

alert(el.value);

after this line:

function telCheck(el){

Now try to submit the form but make sure that there is at least one required field AFTER the tel/email fields, do you get an alert box ? what does it contain ?

Regards,
Max

Hi,
ok I did that and the altered function now looks like this...

function telCheck(el){
alert(el.value);
 if (!el.value){
    el.errors.push("you need to enter either your email or phone");
      return false;
  } else {
    return true;
  }
}

An empty alert box pops up if the field is empty.
If I enter a telephone number, then it contains the number.




The other function remains the same.(Below)

function emailCheck(el){
  if (!el.value && !document.id("telcheck").value) {
    el.errors.push("you need to enter either your email or phone");
      return false;
  } else {
    return true;
  }
}

Ok, now please remove that new line and try to change:

!el.value

to

el.value == ''

Does it display the error when the field is empty ?

If I have the code below correct, the form doesn't validate either field and there is no alert.

The function now looks like this..

function telCheck(el){
 if (el.value == ''){
    el.errors.push("you need to enter either your email or phone");
      return false;
  } else {
    return true;
  }
}

Does the field have an empty space in it ?

It didn't, but I've just tried it with a space and get the same result.

function telCheck(el){
 if (el.value == ' '){
    el.errors.push("you need to enter either your email or phone");
      return false;
  } else {
    return true;
  }
}

I'm sorry did you mean the form input field? Or el.value == ' '

Maybe the validation doesn't work, please try this:

function telCheck(el){
return false;
}

Does it show anything when you submit the form ? I suggest that you add "Title" to your field, this will be used as the error message.

Hi,
Just for me to be clear, did you notice earlier in this thread when I posted this...

(I have deselected the individual Validation required checkboxes for tel & email fields.)

Ok - so I entered the new code and at first the form did not try to validate the required fields.
Then I selected the individual validation required checkbox and it returned a message with the Title as you suggested.

Yes, but I wanted to make sure that the custom functions are called and processed as expected, it looks like they are called, but the return false we used should always make the validation fail, however, this didn't happen here.

This is v4, correct ?

Yes, that's correct.
Version 4.0.4

Would you like me to send log-in details, by PM?

Hi driv,

Yes, please do!

Regards,
Max

pm sent - thank you.🙂

Hello again - I'm afraid I have to revive this thread.

I have now installed Coronoforms v5 and created a form again with email & telephone fields - only one of which needs to be filled in.

In the 'setup' tab - I have two 'Load javascript' events.
In the JS code boxes, I have this code...

function telephoneCheck(el){
 if (!el.value && !document.id("email").value) {
    return false;
  } else {
    return true;
  }
}

and

function emailCheck(el){
 if (!el.value && !document.id("telephone").value) {
    return false;
  } else {
    return true;
  }
}

However, it's still the same - the form requires both fields to be filled in before it can be submitted.
Have I missed something?

Thanks again.

v5 has different syntax, you should replace:

document.id ----> jQuery
.value ----> .val()

You will also need to add the custom functions names to both fields validation sections, and you should not have the required box enabled!

Regards,
Max

ok - so this is where I am at now...

In the telephone field (validation is set to No).
In the telephone class field >> validate['%emailCheck']

In the email field (validation is set to No).
In the email class field >> validate['%telephoneCheck']

In the OnLoad area - I have two js code boxes...

function emailCheck(el){
 if (!el.value && !jQuery("telephone").val()) {
    return false;
  } else {
    return true;
  }
}

and

function telephoneCheck(el){
 if (!el.value && !jQuery("email").val()) {
    return false;
  } else {
    return true;
  }
}

However, the form still submits without asking for either field.

Please change validate['%emailCheck'] to validate['custom:emailCheck']

Hi, I have the same problem with version 4. However, the solution ends abruptly, so i'm not sure what to do next.
I get the same problem with validation not occuring, or blank pop-up box appearing. Please help?

Hi anandmahey,

There is no information in your post to start to work out what is happening. What code have you used and where?

Bob

Hi, I am basically having the same problem the thread poster had, and am able to reproduce the same issues. I have an Either/Or situation as well, however, no validation occurs and no error messages appear. The Version i'm using is 4.0.5 The code being used is

Customer

function customCheck(el){
 if (!el.value && !document.id("vendor").value) {
    return false;
  } else {
    return true;
  }
}

Vendor

function vendorCheck(el){
 if (!el.value && !document.id("customer").value) {
    return false;
  } else {
    return true;
  }
}

Under Field Class

Customer -

validate['%customCheck']

Vendor -

validate['%vendorCheck']

JS Valiation is turned on. Under Elements Validation, Required checkboxes are unchecked, Email is checked.

Hi anandmahey,

Please post a link to the form so I can take a quick look.

Bob

Hi Bob,

its at http://www.ammazingdeals.com

Thank you

Hi Bob,

I made some edits, as the field IDs did not match and customCheck was supposed to be customerCheck.

How, validation still does not occur. Moreover, blank data is being submitted.

Hi - I'm sorry I didn't reply in the last week, I've just returned from holiday.

Unfortunately, the situation is still not resolved.

The last thing I did was to implement Max's changes below.

Please change validate['%emailCheck'] to validate['custom:emailCheck']

However, the form will still not submit unless both fields are filled in.

The error box says...

The value entered is not valid.

Thanks.

@driv, what's your current code used ?

@anandmahey, what happens when you simply set one of the fields as required ? does the validation work ?

Hi Max,

No not at all. Validation does not work. Even blank fields go through (without entering anything). I tried V5 as well, and got the same result as driv, the

The value entered is not valid.

unless both fields are filled. Upon checking the source code of the page, it is as follows. Hopefully this is relevant:

//<![CDATA[
			function customerCheck(el){
 if (!el.value && !document.id("vendoremail").value) {
    return false;
  } else {
    return true;
  }
  }

		//]]>
		
		//<![CDATA[
			function vendorCheck(el){
 if (!el.value && !document.id("customeremail").value) {
    return false;
  } else {
    return true;
  }
}		//]]>
		
//<![CDATA[
			window.addEvent('domready', function() {
				document.id('chronoform_subs').addClass('hasValidation');
				formCheck_subs = new FormCheckMax('chronoform_subs', {
					onValidateSuccess: function(){},
					display : {
						showErrors : 0,
						errorsLocation: 1					}
				});										
			});
			
//]]>
</script>

Hi Max,

No not at all. Validation does not work.

My apologies, i did not read the question correctly. Yes, when one of the fields is Required, then validation works for that field only. If i enter something is the field that is not set as Required, it still asks for an entry in the field set as Required.

Hi again - I hope you won't mind, but I've sent you a pm.
Thanks.🙂

@anandmahey, I'm now confused, not sure you have v4 or v5, because your code is for v4, and your default validation doesn't work, so please start a new topic with your details.

@driv, I will check that!

Hi Max,

apologies for the confusion. I have both V4 and V5 installed. You see, i have been following this thread for a solution. I began with V4, and tried for 2 days unsuccessfully to get the validation working. Then i gave up with V4 and tried V5, and got the same results as @driv. My hope was that since the thread became quiet, the solution that was presented for V5 worked, but it did not.

After that i reverted to V4 to give it another shot. Hope that clears the confusion. I still have V5 installed though.

Thank you.

Hi driv,

You have 3 problems:

#1- the custom function should gets the calling element, and so you should check its value + the value of the "other" element, this is wrong in your case, you call the "emailCheck" by the "telephone" field which then checks the calling element value + the "telephone" field value, so please correct this by calling the "emailCheck" using the "email" field..etc

#2- The logic operator should be || but not &&, since you need "either or"

#3- in v5 the selector should be jQuery("#email"), please note that "#" character, in v4 that was not needed.

@anandmahey, there are many differences between the 2 solutions, I hope my response above gives you some hints, but the v4 solution should be very well covered on other forums posts and on the FAQs

Regards,
Max

Hi,
Thanks for that. Unfortunately, it's still not working. The form won't submit and the error reads...The value entered is not valid

So here is the code as it stands...
Setup tab
on load
load javascript

function emailCheck(el){
 if (!el.val() || !jQuery("#email").val()) {
    return false;
  } else {
    return true;
  }
}

on load
load javascript

function telephoneCheck(el){
 if (!el.val() || !jQuery("#telephone").val()) {
    return false;
  } else {
    return true;
  }
}

Designer tab
email class

validate['custom:emailCheck']

telephone class

validate['custom:telephoneCheck']

I hope I've corrected things as you stated.

The "emailCheck" function should have:

jQuery("#telephone")

and vice versa.

Hi,
ok I've made the changes - the form still won't submit. The error remains the same.
(The value entered is not valid)

Sorry to bump - just wondering if there were any further thoughts on this?

Please contact me using the "contact us" page and I will create a demo form for you with 2 fields and the code required, that will be for v5

Regards,
Max