On 5/23/07, Chris W. Parker <[EMAIL PROTECTED]> wrote:
On Wednesday, May 23, 2007 3:00 PM Glen Lipka <> said:
> Trying to use this.
> http://digitalbush.com/projects/masked-input-plugin
> It is an awesome plugin by the way!
Yeah that is pretty sweet. Except that...
It's a waste. You *still* absolutely have to do proper server-side
validation. Client-side validation is trivial to circumvent.
Although, security issues aside, I guess it could help to prevent
mistakes from your users. Would it make things easier for the user or
frustrating?
> I want to put in the spaces like this 9999 9999 9999 9999.
> But for Amex I want 9999 999999 99999.
> Ultimately, I want to submit to the server without spaces. (Maybe a
> hidden form field)
>
> How should I achieve this?
> Possibility #2: onChange of the select, change the class of the input
> and then re-apply the mask with an if statement which reads the class
> and applies the correct mask. Totally unsure how to do this.
I'd go this route. I would do it on blur because I seem to recall FF not
recognizing onchange in certain cases.
js:
// set the default field mask
$('#cc_field').maskedinput('visamc_mask');
// now change the mask if necessary
$('#selectbox').blur(function () {
// is it this.value?
if(this.value == 'amex')
{
$('#cc_field').maskedinput("...");
}
});
Chris.
This seems to work for me:
$("input.phone").maskedinput("(999) 999-9999");
$("input.zipcode").maskedinput("99999-9999");
$("input.ccDefault").maskedinput("9999 9999 9999 9999");
$("input.ccAmex").maskedinput("9999 999999 99999");
$("form select.creditCardType").change(
function() {
switch ($(this).val()){
case 'amex':
$("input.ccDefault").hide();
$("input.ccAmex").show();
break;
default:
$("input.ccDefault").hide();
$("input.ccAmex").show();
break;
}
}
);
$("input.ccNumber").blur(
function() {
hiddenStrValue = $(this).val().replace(new RegExp("[^0-9]{1,}", "gi"),
"");
$(this).siblings("input.hidden").val(hiddenStrValue);
}
);
I sort of got lost on some of the suggestions.
Regarding server-side validation, I am assuming that the backend programmer
will include that as well.
However, the more that can be done to avoid errors, the better. JS is much
faster than server-side round trips.
It's not a waste of time though because it gives me a chance to make the
user feel that this is a modern dynamic application, early on in the
process.
Cart abandonment is a huge problem and my work at Intuit taught me that
small changes can add up to alot of money.
Ok, one more time: I LOVE THIS PLUGIN. It kicks ass.
Based on the code above, did I do something that could have been
shorter/sweeter?
Glen
