Tricky Eform Validation help needed

130 Posts

bmilton Reply #1, 17 years, 6 months ago

I have a form in which I am dynamically displaying html content based on a drop down box selection. User selects how they would like to be contacted (by phone or email). Whichever choice is selected is a required field, but the opposite field will not be required. I’ve got the display part working fine, but I can’t figure out how to get the validation part worked out.

Here’s the form choice:

<label for="quote_contact_choice">How would you like to be contacted?
<select name="quote_contact_choice" id="quote_contact_choice" onChange="contact_type(this.selectedIndex)">
  <option value="Phone">Phone</option>
  <option value="Email">Email</option>
</select></label>

The onChange calls a Javascript function which then displays the appropriate div containing the right text box. After the user choice and the Javascript runs, the required field is visible and the other is hidden. However, both fields will be processed regardless of whether they are hidden. By default I’ve set them both to required for Eform as below:

<div id="Phone" style="display:block">
<label for="quote_phone">Phone Number: (<i>Required</i>)
<input name="quote_phone" id="quote_phone" class="text" type="text" eform="Phone Number:string:1:Please enter a valid phone number:#check_required" /> </label>
</div>

<div id="Email" style="display:none">
<label for="quote_contact_email">Contact Email: (<i>Required</i>)
<input name="quote_contact_email" id="quote_contact_email" class="text" type="text" eform="Contact Email:email:1:Need email address:" /> </label>
</div>

So the problem is that during validation, Eform will complain that the other selection (Now hidden) is empty. I need to add some logic so that Eform will only validate the single field and will ignore the hidden. Any ideas?

Thanks.

1,010 Posts

TobyL Reply #2, 17 years, 6 months ago

Set those fields to "not required" and add a function to the eFormOnValidate event. In this function you then validate the appropriate fields depending on the selection.

The email field if filled in will be validated by eForm to see if it is a proper email address, so in your function you don’t need to duplicate that. You could add a validation rule to the phone number so that eForm handles any wrong input before your event function is called. If so, all your event function needs to do is check that the appropriate field is not empty. If it is empty you can set the $rMsg to the field name or description (and optionally set the $rClass).

Something like this:

<php //<- for highlighting only
function myValidateFunction( &$fields, &$vMsg, &$rMsg, &$rClass){
	$choice = $fields['quote_contact_choice'];
	if($choice=='Phone' && empty($fields['quote_phone'])){
		$vMsg[] = 'Phone Number';
		$rClass['quote_phone'] = 'required';
	}elseif($choice=='Phone' && empty($fields['quote_contact_email'])){
		$vMsg[] = 'Contact Email';
		$rClass['quote_contact_email'] = 'required';
	}
	return true;
//for highlighting only ?>
}

eForm | eForm support | eForm @ wiki

130 Posts

bmilton Reply #3, 17 years, 6 months ago

Thanks very much for the idea.

I add the function to the Eform call as $eFormOnValidate=`MyValidateFunction`, and then the php code goes where? Does it have to go in the eform snippet code or in the quote form itself?

-Brian

130 Posts

bmilton Reply #4, 17 years, 6 months ago

I’ve read through forum posts and have gotten a little further...

I put the function inside of a new snippet
Called that snippet just before the eform snippet call.
I’m not getting an error about the function not being found anymore so I’m past that. Now trying to get the function to do what I need. Will post again if I can’t get it.

Thanks,

-Brian

130 Posts

bmilton Reply #5, 17 years, 6 months ago

Well, I got the validation function to do the trick so thank you. However, I am stuck on a new issue and would sure appreciate any help as I’ve been banging on this for several hours with no luck.

When the Eform snippet is called, and validation fails for any field, it reloads the page and set my drop down box value to undefined. This causes my dynamic Div display to fail since it is looking for the option value to determine which text field (phone or email) should be displayed.

My select box has 2 options - phone and email.
By default, I want the phone option to be selected and I want the phone text field to be displayed. Therefore, I’ve set the phone div to display when the page initially loads. This is why it gets out of sync when say the email option is selected and validation fails...after the page reloads the phone div gets shown by default again.

<div id="Phone" style="display:block">
<label for="quote_phone">Phone Number: (<i>Required</i>)
<input name="quote_phone" id="quote_phone" class="text" type="text" eform="Phone Number:string:0 /> </label>
</div>

<div id="Email" style="display:none">
<label for="quote_contact_email">Contact Email: (<i>Required</i>)
<input name="quote_contact_email" id="quote_contact_email" class="text" type="text" eform="Contact Email:email:0" /> </label>
</div>

The onchange property for the select box calls the javascript which will turn the right div on and off based on the current value. This works fine.

<label for="quote_contact_choice">How would you like to be contacted?
<select name="quote_contact_choice" id="quote_contact_choice" onchange="set_contact_field(document.QuoteForm.quote_contact_choice.value)">
  <option value="Phone">Phone</option>
  <option value="Email">Email</option>
</select></label>

This is the Javascript:

function set_contact_field(op) {
document.getElementById('OptionValue').innerHTML = op;

  if (op == "phone") {
    document.getElementById('Phone').style.display="block";
    document.getElementById('Email').style.display='none';

  }
  if (op == "email") {
    document.getElementById('Email').style.display="block";
    document.getElementById('Phone').style.display='none';
  
  }
}

When the page reloads after an Eform validation, the previous values for all text boxes are still populated and in fact the drop down box is still selecting the last choice (Email)...yet the value is now undefined. So the drop down box is showing "email", the validation error says "Please enter a valid email", and yet the phone text box is being shown instead of the email text box.

What I had tried is to not just call my Javascript during the onchange, but also call it again just after the html Divs in the hopes that it would correct the text box displayed. Since the value comes back undefined, it isn’t going to help.

I hope that makes sense. Not sure what to do.

1,010 Posts

TobyL Reply #6, 17 years, 6 months ago

How about changing the function to look up the quote_contact_value itself?

function set_contact_field() {
op = document.QuoteForm.quote_contact_choice.value;

document.getElementById('OptionValue').innerHTML = op;

  if (op == "phone") {
    document.getElementById('Phone').style.display="block";
    document.getElementById('Email').style.display='none';

  }
  if (op == "email") {
    document.getElementById('Email').style.display="block";
    document.getElementById('Phone').style.display='none';
  
  }
}

The select box js call would then be:

<label for="quote_contact_choice">How would you like to be contacted?
<select name="quote_contact_choice" id="quote_contact_choice" onchange="set_contact_field()">
  <option value="Phone">Phone</option>
  <option value="Email">Email</option>
</select></label>

eForm | eForm support | eForm @ wiki

130 Posts

bmilton Reply #7, 17 years, 6 months ago

That did the trick! Thanks a bunch.

-Brian