JavaScript input mask/validator

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
10 messages Options
Reply | Threaded
Open this post in threaded view
|

JavaScript input mask/validator

Esteban A. Maringolo
Hi,

I'm looking for a good, clean as possible, javascript implementation
for form input masked input and/or validation.

I can search for it on the web, but there are tons of implementations,
mostly for aspx and other very heavyweight.

¿Does anybody recommend one that fits the "Seaside-way"?

Best regards,

--
Esteban A. Maringolo
[hidden email]
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JavaScript input mask/validator

cedreek
validation could be done with scriptaculous and/or magritte + CSS I think...
For masks, I don't really see. It's about cancelling the last keyboard
entry if not compatible with the format provided ?
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JavaScript input mask/validator

cedreek
> For masks, I don't really see.
>
I found that for numerical masks. The script is not too long and
shoulnd't be too difficult to integrate
(http://javascript.internet.com/forms/dfilter.html).

For a phone number:
<td><input value="" type="text" onKeyDown="javascript:return dFilter
(event.keyCode, this, '(###) ###-####');">

hth
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JavaScript input mask/validator

Esteban A. Maringolo
In reply to this post by cedreek
Hi,

On Jan 31, 2008 11:12 AM, cdrick <[hidden email]> wrote:
> validation could be done with scriptaculous and/or magritte + CSS I think...

Validation could work that way, but masking input not.
Validation could be done "per field" and masking must be done by char/keystroke.

The model will validate the field, but for some kind of users, having
a predefined input "shape" is better than having an empty text entry.
As sooner the feedback, less time is lost, and the user can do more stuff.

> For masks, I don't really see. It's about cancelling the last keyboard
> entry if not compatible with the format provided ?

No, it can get more complicated if you have to deal with different
decimal separators, or a fixed size of decimal places, an ISBN code,
or any other arbitrary input.

I'm not speaking in the air, by now I only need a float input
validator, char-by-char if possible, if not, I can make my own with JS
and RegEx, but I'm looking for something more comprehensive.

Best regards,

--
Esteban A. Maringolo
[hidden email]
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JavaScript input mask/validator

cedreek
uhm this one seems pretty cool
(http://javascript.internet.com/forms/input-mask.html), based on
prototype and just need a css class when rendered so as to have:
<td>Phone number:</td>
<td><input id="input_phone" type="text" class="text input_mask mask_phone"></td>

you then have to implement your filter in js... not very smalltakish
until some port was done


...

   /* Each mask has a format and regex property.  The format consists
    * of spaces and non-spaces.  A space is a placeholder for a value the user
    * enters.  A non-space is a literal character that gets copied to that
    * position in the value.  The regex is used to validate each character, one
    * at a time (it is not applied against the entire value in the form field,
    * just the characters the user enters).
    *
    * The way you name your masks is significant.  If you create a mask called
    * date_us, you cause it to be applied to a form field by a) adding the
    * input_mask class to that form field, which triggers this script to treat
    * it specially, and b) adding the class mask_date_us to the form field,
    * which causes this script to apply the date_us mask to it.
    */
   masks: {
      date_iso: {
         format: '    -  -  ',
         regex:  /\d/
....
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JavaScript input mask/validator

Esteban A. Maringolo
On Jan 31, 2008 11:41 AM, cdrick <[hidden email]> wrote:
> uhm this one seems pretty cool
> (http://javascript.internet.com/forms/input-mask.html)

I've found this before asking here, but I didn't like it, at least not
with confidence.

The best toolkit I've found so far is the www.zapatec.com toolkit, but
it's a full featured pack, and I can't use it as minimal as possible.

Best regards,

--
Esteban A. Maringolo
[hidden email]
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JavaScript input mask/validator

Esteban A. Maringolo
Hi,

Just for the record, I've found a JS Prototype based form validator,
its code is clean, and seems to work fast,
<http://www.tetlaw.id.au/view/javascript/really-easy-field-validation>.

The website even has some useful, and handy javascripts, such as the
FastInit.js <http://www.tetlaw.id.au/view/javascript/fastinit>.

I'll give both a try.

Best regards,

--
Esteban A. Maringolo
[hidden email]
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

RE: JavaScript input mask/validator

Sebastian Sastre-2
Great Esteban! Thanks for sharing you finding

        cheers,

Sebastian Sastre


> -----Mensaje original-----
> De: [hidden email]
> [mailto:[hidden email]] En nombre
> de Esteban A. Maringolo
> Enviado el: Viernes, 01 de Febrero de 2008 10:11
> Para: Seaside - general discussion
> Asunto: Re: [Seaside] JavaScript input mask/validator
>
> Hi,
>
> Just for the record, I've found a JS Prototype based form
> validator, its code is clean, and seems to work fast,
> <http://www.tetlaw.id.au/view/javascript/really-easy-field-val
idation>.

>
> The website even has some useful, and handy javascripts, such
> as the FastInit.js <http://www.tetlaw.id.au/view/javascript/fastinit>.
>
> I'll give both a try.
>
> Best regards,
>
> --
> Esteban A. Maringolo
> [hidden email]
> _______________________________________________
> seaside mailing list
> [hidden email]
> http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JavaScript input mask/validator

cedreek
Yes thanks Esteban ;)

>> uhm this one seems pretty cool
>> (http://javascript.internet.com/forms/input-mask.html)

>I've found this before asking here, but I didn't like it, at least not
>with confidence.

Also can you explain why ? because of ie incompatibility ? not enough
robust... It's relying on prototype like really-easy-field-validation
you showed us...

Thanks
Cédrick

_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside
Reply | Threaded
Open this post in threaded view
|

Re: JavaScript input mask/validator

Esteban A. Maringolo
On Feb 1, 2008 10:55 AM, cdrick <[hidden email]> wrote:

> Yes thanks Esteban ;)
>
> >> uhm this one seems pretty cool
> >> (http://javascript.internet.com/forms/input-mask.html)
>
> >I've found this before asking here, but I didn't like it, at least not
> >with confidence.
>
> Also can you explain why ? because of ie incompatibility ? not enough
> robust... It's relying on prototype like really-easy-field-validation
> you showed us...

I don't really like the usage of element class as "unobtrusive
javascript", at least not for this kind of behavior.

I looked at it and didn't get the "I must use this" feeling.

Have you seen the page comments?

Best regards,

--
Esteban A. Maringolo
[hidden email]
_______________________________________________
seaside mailing list
[hidden email]
http://lists.squeakfoundation.org/cgi-bin/mailman/listinfo/seaside