Making the Phone Number a Required Field

mbowzeylombowzeylo Member
in Help edited March 2008
Hey Guys,

I've searched the forum and docs but can't seem to find a solution to my problem.

I want to make the phone number field on the checkout page a required field. Can I do this with the existing field or do I need to hide it and make my own custom required field for the phone number?

Appreciate your help!
Comments
  • brettbrett FoxyCart Team
    http://wiki.foxycart.com/faqs?s=phone#can_i_make_customer_phone_a_required_field

    We know, the wiki very poorly organized. We're working on revamping it right as I type.
  • Sorry dude... I don't know how I missed that. Problem solved. Thanks.

    Cheers
  • lukeluke FoxyCart Team
    Not your fault Mike, I get lost in our wiki too...

    ...type faster, Brett, type faster...

    Heheheh. Honestly, the reorg of the docs is starting to look really nice. There's still a lot to do, but we're getting there.

    Am I the only one that thinks writing documentation is like eating your vegetables?
  • This no longer works (for me) in 0.4.0

    The blur function runs, but fc_UpdateErrorDisplay is no longer defined.

    I changed this to updateErrorDisplay, which I see is used in the code elsewhere, but it must be some kind of batty scope issue because I'm still getting an undefined for that.

    My store begins at http://www.collectivesoftware.com/Purchase/Cart

    Halp?
  • lukeluke FoxyCart Team
    Sorry if this wasn't clarified in the upgrade notes. We'll look into updating those. All of the checkout javascript has been completely redone. If you call FC.checkout.updateErrorDisplay you should get what you want.
  • Hi Luke,
    I'm assuming the error logs for "Phone is required. Response Reason Code: 33" is from Authorize.net. I get them on about 1/3 of the orders.

    1.) Is the script in the wiki up to date for 0.4.0? Or do I need to change both
    fc_UpdateErrorDisplay(this.name,true); and fc_UpdateErrorDisplay(this.name,false);
    to
    FC.checkout.updateErrorDisplay(this.name,true); and FC.checkout.updateErrorDisplay(this.name,false);

    2.) Do i place the script after ^^checkout^^ and before </div>? Or after </div>?

    I'm really, really new at this...(still working up the courage to try something Brett helped me with me with.)
    Thanks,
    Sandy
  • lukeluke FoxyCart Team
    Hey Sandy, thanks for posting. Yea, that does look like an authorize.net error. That's really good to know. Is that a setting you've configured in your Authorize.net account or is that standard for all accounts? In a future version it would be nice for our system to know about such things and setup requirements in the checkout automatically.

    As for your questions, yes, you'll have to update them as you described. As with all programming, it doesn't hurt to give it a shot and see what happens. :) If you don't have one already, feel free to create another FoxyCart store to use for your own testing purposes.

    The script should technically go in the <head> section of your checkout template. It doesn't really matter. Remember, have fun and don't worry about breaking stuff. That's the best way to learn how something works. :)
  • sandysandy Member
    edited November 2008
    Hi Luke!
    Thanks for your quick reply. You guys are really great!

    The client set up the Authorize.net account, so I don't know, but I bet you are right. Sometimes a credit card company will require the cardholders phone number for online transactions.

    PayPal has it as an optional radio button in your account settings, but recommends that you do NOT require a phone number because it “may have a negative effect on buyer conversion”.

    Thanks for-
    A.) Pointing me to the right place to drop in the script. Now I know how to do it if I need to.
    B.) Helping me to rethink if requiring a phone number is a good idea.
    C.) AND for recommending that I set up a test account to try stuff out on!! What a great tip!

    Thanks again!
    Sandy
  • I have added a quick summary of 0.4.0 phone field changes to the wiki page linked above.

    I use authorize.net too, so it could be the case that my phone field is required from that side as well. But we just require it anyway for our own business practices, because it's amazing how often customers typo their own email address (and that means we can't contact them with the software download links)
  • brettbrett FoxyCart Team
    Thx ferrix for updating the wiki. We love you for it. I've updated the Auth.net wiki page as well to point out this potential issue.
  • Hi Guys,
    I tried this, but can't seem to make it work. I am using the standard checkout template with the Comodo script added and have also added a custom "Comments" field with no problem.

    I changed the fc_UpdateErrorDisplay to FC.checkout.updateErrorDisplay

    I tried leaving in and taking out:
    // add an error label after the phone
    $j("#customer_phone").after('<label for="customer_phone" class="fc_error" style="display:none">Please enter your phone number.<\/label>');

    Here is what I used:
    <script type="text/javascript" charset="utf-8">
    /* <![CDATA[ */
    $j(document).ready(function(){
    // add the required class
    $j("#customer_phone").addClass("fc_required");
    // add an asterisk to the label
    $j("#li_customer_phone label.fc_label_left").append("<span class=\"fc_ast\">*<\/span>");

    // Now add the onblur error checking events
    $j("#customer_phone").blur(function() {
    if (this.value == "") {
    FC.checkout.updateErrorDisplay(this.name,true);
    } else {
    FC.checkout.updateErrorDisplay(this.name,false);
    }
    });
    });
    /* ]]> */
    </script>

    Tried it in the head both before and after the Comodo script.

    Any ideas as to where I am going wrong?
    Thanks,
    Sandy
  • lukeluke FoxyCart Team
    Hey Sandy. I updated the wiki for you:

    http://wiki.foxycart.com/faqs#can_i_make_customer_phone_a_required_field

    In 0.4.0 we changed the HTML markup a bit so instead of #li_customer_phone it's now li.fc_customer_phone. Though we knew this would throw some people off, it's more "correct" in our mind and we figured it makes the most sense to change it now rather than later.

    Hope that helps. Also, you don't have to add the error label as it's already there in the 040 markup.
  • Hey Luke, Ferrix & Brett,
    SUCCESS using the script in the wiki!
    Thanks for your help!
    Sandy
  • Hello...

    I am dragging up an old thread here, but is the code for 4.x valid for 5.x?

    It *looks* right from my limited js knowledge, but my phone number isn't getting updated.
  • lukeluke FoxyCart Team
    Check the upgrade logs for 051. This code uses the $j which you'd want to change to jQuery unless you set it back to no conflict mode: http://wiki.foxycart.com/docs:upgrading:0.5.1
  • I am SOOO green on this, but I am trying to make all billing address fields required, AND to show the shipping fields by default (I want the "Use a different shipping address" box checked by default). Can someone give me relatively explicit instructions on this?

    I'm using 7.1 and I'm very afraid to upgrade because I have very little support right now. Thanks!

    Steve
  • fc_adamfc_adam FoxyCart Team
    edited May 2012
    @stevegmartin,

    For the required fields, this page should help you out: http://wiki.foxycart.com/snippets/checkout/making_checkout_fields_required

    For making the shipping address display all of the time, use the following:
    <script type="text/javascript">
    if (!jQuery("#use_different_addresses").is(":checked")) {
      jQuery("#use_different_addresses").attr("checked", "checked");
      FC.checkout.displayShippingAddress(jQuery("#use_different_addresses")[0]);
    }
    jQuery("#fc_use_different_address").hide();
    </script>
    
  • Awesome! Everything worked like a charm. And to make this even cooler, I changed the language for the check box to read "If your shipping address is the same as above, uncheck this box." and deleted the "hide" line from your code. Now they can still untick the box if their address is the same, but they're prompted to fill it in by default instead of leave it out (which many of our customers we doing).

    Thanks!
  • fc_adamfc_adam FoxyCart Team
    @stevegmartin,

    Nice addition.

    To add to this, I just remembered we added a function in one of the more recent versions of FoxyCart that you can call to make the shipping fields required by default - which also adds a handy little link under the shipping address which simply copies the fields from billing to shipping.

    It's simply this:
    FC.checkout.requireShippingAddress();
    
Sign In or Register to comment.