No Email Validation when Password Bypassed

bushybushy Member
in Bugs & Feature Requests edited March 2008
version 0.3.2

I've turned off the password requirement on the checkout page (by passing a hidden field value for the customer phone from my product form).

The first thing I noticed is that after doing so the email field on the checkout form no longer requires a value (although an asterisk still appears next to the field label).

So I manually added some code to make it a required field. That works as far checking to see if there's an entry. But it doesn't validate for format. So if I enter an improperly formatted address (for example 1 or a@a) the order can be submitted, although it then returns an error from the payment gateway (Cybersource in my case).

So I'm guessing the way its coded is that email validation is fired by the Continue button. Remove the Continue button (by removing the password requirement) and you lose email validation.


I guess I can add my own validation script but was wondering if anyone else has a better solution. And for anyone bypassing the password requirement, be forwarned.
Comments
  • lukeluke FoxyCart Team
    Thanks for the post bushy. It shouldn't be too hard for us to validate the email on submit as well. We'll take a look.
  • bushybushy Member
    Thanks Luke. In the meantime, since I've added the code to make email a required field (using the example from the docs), is there something I can add to the blur event that will validate for format? That should be good enough for my purposes. Right now the code looks like this:
    $j(document).ready(function(){
    		// add the required class
    		$j("#customer_email").addClass("fc_required");
    		// add an error label after the phone
    		$j("#customer_email").after('<label for="customer_email" class="fc_error" style="display:none">Please enter your email address.<\/label>');
     
    		// Now add the onblur error checking events
    		$j("#customer_email").blur(function() {
    			if (this.value == "") {
    				fc_UpdateErrorDisplay(this.name,true);
    			} else {
    				fc_UpdateErrorDisplay(this.name,false);
    			}
    		});
    });
    
  • lukeluke FoxyCart Team
    Change your if test like so:
    if (this.value == "" || !fc_IsValidEmail()) {
    
    This will probably change in future versions, but that should work for now. Eventually we'll open up our JS side of things to be more of a Foxy API.
  • bushybushy Member
    edited March 2008
    Thanks Luke! Just what I needed. I'm all set now.

    For anyone reading this thread, if you've chosen to bypass the checkout password requirement, you should probably make customer_email a required field and put validation on it from Luke's example. If you don't, and a customer makes a formatting mistake when entering his email (or doesn't enter an email address at all) you risk your payment gateway rejecting the transaction and the sale not going through. I checked out a couple of foxycart sites today that had bypassed the password requirement and saw that they had this issue.
  • ferrixferrix Member
    edited March 2008
    +1, "me too", etc. :)

    This is a pretty important bug that I'd like to see repaired.

    ETA: but there's a satisfactory workaround so.. I guess it's not as if it's critical.
  • adenwattsadenwatts Member
    edited June 2008
    I don't know javascript, but I'd like to add this functionality (email validation for one-time-use) to my checkout.

    It looks like with the change Luke recommended that the code should look like this:

    $j(document).ready(function(){
    // add the required class
    $j("#customer_email").addClass("fc_required");
    // add an error label after the phone
    $j("#customer_email").after('<label for="customer_email" class="fc_error" style="display:none">Please enter your email address.<\/label>');

    // Now add the onblur error checking events
    $j("#customer_email").blur(function() {
    if (this.value == "" || !fc_IsValidEmail()) {
    fc_UpdateErrorDisplay(this.name,true);
    } else {
    fc_UpdateErrorDisplay(this.name,false);
    }
    });
    });

    Is that correct? Is that the whole code or just part of the code?

    the third line of code says:
    // add an error label after the phone

    should it say something like this instead?:
    // add an error label after the email

    And, where should I paste this code into my checkout template?

    Sorry for all the questions. I know I need to learn javascript; but, maybe this will be able to help some others too.

    Thanks,

    Aden Watts
  • brettbrett FoxyCart Team
    Any line that starts with // is a comment, so it doesn't matter for functionality. That's just to help understand things.

    The error label is actually already in the HTML, so you don't need that line either.

    Add it to the bottom of your checkout page, above the </body> tag or something, and make sure it's in appropriate <script> tags, since it's javascript.

    I just did a quick test and that seems to work perfectly.
    <script type="text/javascript" charset="utf-8">
    	$j(document).ready(function(){
    	// add the required class
    	$j("#customer_email").addClass("fc_required");
    
    
    	// Now add the onblur error checking events
    	$j("#customer_email").blur(function() {
    	if (this.value == "" || !fc_IsValidEmail()) {
    	fc_UpdateErrorDisplay(this.name,true);
    	} else {
    	fc_UpdateErrorDisplay(this.name,false);
    	}
    	});
    	});
    </script>
    
  • adenwattsadenwatts Member
    edited July 2008
    Thank you very much. I copied and pasted that code into the bottom of my checkout template and I now have email validation for one-time-use (and, I don't even know javascript).

    There is one tiny issue. The HTML for this list item on my checkout page now looks like this (and I don't know where that lonely "<a/>" tag is coming from):

    [font=#Courier New]<li id="li_customer_email" class="fc_row">
    <label class="fc_label_left" for="customer_email"></label>
    <input id="customer_email" class="fc_text fc_text_long fc_required" type="text" value="" autocomplete="off" name="customer_email"/>
    <label class="fc_error" style="" for="customer_email">Please enter a valid email address.</label>
    <a/>
    </li>[/font]

    It's not a big issue. Most people probably wouldn't even notice it. It's just a little annoying. You can check it out at: http://www.aegisprotection.com/buy.html

    If you have any idea how to get rid of that <a/> please let me know. Otherwise, no big deal.

    Also, should we add this to the wiki now?
  • brettbrett FoxyCart Team
    You know, that got added a few versions back on accident, and it'll be removed in our next version. It annoys me too, but because it's not a critical bug we haven't fixed it (because we really _really_ don't like touching a live version unless it's a critical bug or security issue).

    So that'll go away, but you could hide it with CSS if you wanted in the meantime. Sorry about that.
  • adenwattsadenwatts Member
    edited July 2008
    No Problem. I just hid it with CSS.
  • Hello Brett,
    I am probably your least experienced user!
    In Admin under Templates, Checkout
    Here is the WHOLE TEMPLATE. Should it look like this? 'Cuz it's not working for me. I still need to enter a password.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">;

    <html xmlns="http://www.w3.org/1999/xhtml">;
    <head>
    <title>^^store_name^^ Checkout</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="https://^^store_domain^^/themes/standard/styles.css"; type="text/css" media="screen" charset="utf-8" />
    </head>

    <body id="checkout">
    <div id="pageContainer" style="width:760px; margin:0px auto;">
    ^^cart^^
    ^^checkout^^
    </div>

    <script type="text/javascript" charset="utf-8">
    $j(document).ready(function(){
    // add the required class
    $j("#customer_email").addClass("fc_required");

    // Now add the onblur error checking events
    $j("#customer_email").blur(function() {
    if (this.value == "" || !fc_IsValidEmail()) {
    fc_UpdateErrorDisplay(this.name,true);
    } else {
    fc_UpdateErrorDisplay(this.name,false);
    }
    });
    });
    </script>
    </body>
    </html>

    Thanks,
    Sandy
  • brettbrett FoxyCart Team
    Hi Sandy.
    You can just use the standard checkout template. No need to add that extra javascript anymore (I don't think; if I'm wrong let me know).

    What you're after is a checkout without password, which you need to trigger _before_ you hit the checkout.

    On all your add-to-cart links or forms you just need to add an extra little bit, as described here:
    http://wiki.foxycart.com/docs:checkout:prepopulating

    That help?
  • Hi Brett,
    Oh, DUH! I should put it in my ModX product page template?
    Sorry, newbie on both!
    Thanks,
    Sandy
  • brettbrett FoxyCart Team
    Yeah, wherever your add-to-cart links or forms are, whether that's hardcoded, in the template, in a Ditto chunk, or etc. Let us know how it goes.
  • Hi Brett,
    We are using a Standard FoxyCart installation with the Standard cart and checkout templates.
    In our ModX template we use a chunk, in part:
    <div id="onlineadd">
    <form class="foxycart" action="https://fenix.foxycart.com/cart"; method="post" accept-charset="utf-8">
    <input type="hidden" name="name" value="[*longtitle*]" />
    <input type="hidden" name="price" value="[*onlineprice*]" />
    <input type="hidden" name="weight" value="[*weightsingle*]" />
    <label>Quantity </label>
    <input name="quantity" type="text" size="3" maxlength="3">
    <input type="submit" value="Add to Cart" class="submit" />
    </form></div>
    passing the order info to FoxyCart...right?

    I put the <input name="shipping_phone" value="." /> in the chunk, and of course, it added a text area to the page. Should I be adding it into one of the FoxyCart templates?

    Thanks for your help,
    Sandy
  • brettbrett FoxyCart Team
    Just add type="hidden" to your <input> and you should get what you're looking for. (I think it's what you're looking for, at least.)
  • Hi Brett,
    Success!!
    You are the best!
    Sandy
  • I've just implemented this for a client and I got the impression for the Comment left by Brett (to Sandy on Nov 4th 2008) that there is no need for the extra field validation. However, is seems the only thing in place is a check of any sort of data in the email field but no other checks like formatting are run so conceivably as user could enter a bunch of !#$!@#$!%%^%$ and the purchase would go thru. Is there any place to add in a more complete check?
  • lukeluke FoxyCart Team
    Thanks for bumping this... looks like it slipped through the cracks. We'll update this in the next version. If you want to do it yourself, you could probably just call something like this tied to the onchange for the email field:
    		if (jQuery("#customer_email").val() == "" || !FC.validator.isValidEmail(jQuery("#customer_email").val())) {
    			if (jQuery("#customer_email")[ 0 ]) {
    				jQuery("#customer_email")[ 0 ].focus();
    			}
    			jQuery("#fc_data_entry_container").hide();
    			jQuery("#fc_continue").show();
    			FC.checkout.updateErrorDisplay("customer_email",true);
    		} else {
    			FC.checkout.updateErrorDisplay("customer_email",false);
                   }
    
    
  • Thanks Luke!
Sign In or Register to comment.