[jQuery] Re: Masked Input Field

[Glen Lipka]

And of course, the second I say I am done...I am not.
If you don't put in the right number of characters...like if you only put
half the field in and blur, it erases the content completely.
I think this is bad UX.  (Sorry)  Sometimes someone might know their zip
(first 5 digits) then click to go to another window to lookup on
usps.comtheir +4.  It shouldn't delete it.

Is it possible to fix this?  Would I have to edit the plugin directly?  Ugh?
Does Josh view this?  Ill send directly to him. :)

Glen

On 5/23/07, Glen Lipka <[EMAIL PROTECTED]> wrote:

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