format a field (input in form) onblur

[WindAndWaves]

Hi Gurus

In my quest in putting my first javascript together, I am now trying to
conquer something that seems trivial, but has taken me hours.

I would like to format a field in a form once the person has completed it.
The format should be "00". For example, if the person puts 1 then it should
become 01 and if the person puts 12 in the field then it should stay like
that. If the person puts 2004 then it should become 04, and if the person
puts 012 then it should become 12.

At the same time, it would also be cool if we can warn the user that it
should only contain numbers [0-9].


Tia


- Nicolaas

[Yann-Erwan Perio]

Re: format a field (input in form) onblur

WindAndWaves wrote:
[color=blue]
> I would like to format a field in a form once the person has completed it.
> The format should be "00". For example, if the person puts 1 then it should
> become 01 and if the person puts 12 in the field then it should stay like
> that. If the person puts 2004 then it should become 04, and if the person
> puts 012 then it should become 12.
>
> At the same time, it would also be cool if we can warn the user that it
> should only contain numbers [0-9].[/color]

Check the manual for the "substring" String method, or the "replace"
String method with a regexp:

<URL:http://devedge.netscap e.com/library/manuals/2000/javascript/1.5/reference/string.html#119 4665>
<URL:http://devedge.netscap e.com/library/manuals/2000/javascript/1.5/reference/string.html#119 4258>


Here's an illustration:

---
<form action="" onsubmit="retur n validate(this)" >
<input type="text" onblur="check(t his, 'foo1', 'empty', '2num')">
<input type="text" onblur="check(t his, 'foo2', 'empty', '2num')">
<input type="text" onblur="check(t his, 'foo3', 'empty', '2num')">
<input type="submit">
</form>

<script type="text/javascript">
function padLeft(str, pad, count) {
while(str.lengt h<count)
str=pad+str;
return str;
}

function check(el, field) {
//controller
var result={error:" "};
for(var ii=2; ii<arguments.le ngth; ii++)
if((result=sing leCheck(el, field, arguments[ii])).error)
break;
return result;

//single check
function singleCheck(el, field, type) {
var result={error:" "};
switch(type) {
case "empty" :
if(/^\s*$/.test(el.value) ) {
result.error="f ield "+field+" : should not be empty.";
}
break;
case "2num" :
if(!/^\d+$/.test(el.value) ) {
result.error="f ield "+field+" : should contain only numbers.";
} else {
el.value=
padLeft(el.valu e.replace(/^\d+(\d\d)$/,"$1"), "0", 2);
}
break;
}

if(el.style)
el.style.border Color = result.error ? "#c00" : "";

return result;
}
}

function validate(form){
var a=[], msg=[], index=1;

// re-test the fields
a[a.length]=check(form.ele ments[0], "foo1", "empty", "2num");
a[a.length]=check(form.ele ments[1], "foo2", "empty", "2num");
a[a.length]=check(form.ele ments[2], "foo3", "empty", "2num");

//analyse the tests
for(var ii=0; ii<a.length; ii++)
if(a[ii].error)
msg[msg.length]=(index++)+" - "+a[ii].error;

//alert the message, if any
if(msg.length)
alert(msg.join( "\n"));

//handle form's submission
return !msg.length;
}
</script>
---


HTH
Yep.

[WindAndWaves]

Re: format a field (input in form) onblur


"Yann-Erwan Perio" <y-e.perio@em-lyon.com> wrote in message
news:41554379$0 $26804$626a14ce @news.free.fr.. .[color=blue]
> WindAndWaves wrote:
>[color=green]
> > I would like to format a field in a form once the person has completed[/color][/color]
it.[color=blue][color=green]
> > The format should be "00". For example, if the person puts 1 then it[/color][/color]
should[color=blue][color=green]
> > become 01 and if the person puts 12 in the field then it should stay[/color][/color]
like[color=blue][color=green]
> > that. If the person puts 2004 then it should become 04, and if the[/color][/color]
person[color=blue][color=green]
> > puts 012 then it should become 12.
> >
> > At the same time, it would also be cool if we can warn the user that it
> > should only contain numbers [0-9].[/color]
>
> Check the manual for the "substring" String method, or the "replace"
> String method with a regexp:
>
>[/color]
<URL:http://devedge.netscape.com/library/...pt/1.5/referen
ce/string.html#119 4665>[color=blue]
>[/color]
<URL:http://devedge.netscape.com/library/...pt/1.5/referen
ce/string.html#119 4258>[color=blue]
>
>
> Here's an illustration:
>
> ---
> <form action="" onsubmit="retur n validate(this)" >
> <input type="text" onblur="check(t his, 'foo1', 'empty', '2num')">
> <input type="text" onblur="check(t his, 'foo2', 'empty', '2num')">
> <input type="text" onblur="check(t his, 'foo3', 'empty', '2num')">
> <input type="submit">
> </form>
>
> <script type="text/javascript">
> function padLeft(str, pad, count) {
> while(str.lengt h<count)
> str=pad+str;
> return str;
> }
>
> function check(el, field) {
> //controller
> var result={error:" "};
> for(var ii=2; ii<arguments.le ngth; ii++)
> if((result=sing leCheck(el, field, arguments[ii])).error)
> break;
> return result;
>
> //single check
> function singleCheck(el, field, type) {
> var result={error:" "};
> switch(type) {
> case "empty" :
> if(/^\s*$/.test(el.value) ) {
> result.error="f ield "+field+" : should not be empty.";
> }
> break;
> case "2num" :
> if(!/^\d+$/.test(el.value) ) {
> result.error="f ield "+field+" : should contain only numbers.";
> } else {
> el.value=
> padLeft(el.valu e.replace(/^\d+(\d\d)$/,"$1"), "0", 2);
> }
> break;
> }
>
> if(el.style)
> el.style.border Color = result.error ? "#c00" : "";
>
> return result;
> }
> }
>
> function validate(form){
> var a=[], msg=[], index=1;
>
> // re-test the fields
> a[a.length]=check(form.ele ments[0], "foo1", "empty", "2num");
> a[a.length]=check(form.ele ments[1], "foo2", "empty", "2num");
> a[a.length]=check(form.ele ments[2], "foo3", "empty", "2num");
>
> //analyse the tests
> for(var ii=0; ii<a.length; ii++)
> if(a[ii].error)
> msg[msg.length]=(index++)+" - "+a[ii].error;
>
> //alert the message, if any
> if(msg.length)
> alert(msg.join( "\n"));
>
> //handle form's submission
> return !msg.length;
> }
> </script>
> ---
>
>
> HTH
> Yep.[/color]



Cheers - I will have a go at that. Thank you.

[WindAndWaves]

Re: format a field (input in form) onblur

"Yann-Erwan Perio" <y-e.perio@em-lyon.com> wrote in message
news:41554379$0 $26804$626a14ce @news.free.fr.. .[color=blue]
> WindAndWaves wrote:
>[color=green]
> > I would like to format a field in a form once the person has completed[/color][/color]
it.[color=blue][color=green]
> > The format should be "00". For example, if the person puts 1 then it[/color][/color]
should[color=blue][color=green]
> > become 01 and if the person puts 12 in the field then it should stay[/color][/color]
like[color=blue][color=green]
> > that. If the person puts 2004 then it should become 04, and if the[/color][/color]
person[color=blue][color=green]
> > puts 012 then it should become 12.
> >
> > At the same time, it would also be cool if we can warn the user that it
> > should only contain numbers [0-9].[/color]
>
> Check the manual for the "substring" String method, or the "replace"
> String method with a regexp:
>
>[/color]
<URL:http://devedge.netscape.com/library/...pt/1.5/referen
ce/string.html#119 4665>[color=blue]
>[/color]
<URL:http://devedge.netscape.com/library/...pt/1.5/referen
ce/string.html#119 4258>[color=blue]
>
>
> Here's an illustration:
>
> ---
> <form action="" onsubmit="retur n validate(this)" >
> <input type="text" onblur="check(t his, 'foo1', 'empty', '2num')">
> <input type="text" onblur="check(t his, 'foo2', 'empty', '2num')">
> <input type="text" onblur="check(t his, 'foo3', 'empty', '2num')">
> <input type="submit">
> </form>
>
> <script type="text/javascript">
> function padLeft(str, pad, count) {
> while(str.lengt h<count)
> str=pad+str;
> return str;
> }
>
> function check(el, field) {
> //controller
> var result={error:" "};
> for(var ii=2; ii<arguments.le ngth; ii++)
> if((result=sing leCheck(el, field, arguments[ii])).error)
> break;
> return result;
>
> //single check
> function singleCheck(el, field, type) {
> var result={error:" "};
> switch(type) {
> case "empty" :
> if(/^\s*$/.test(el.value) ) {
> result.error="f ield "+field+" : should not be empty.";
> }
> break;
> case "2num" :
> if(!/^\d+$/.test(el.value) ) {
> result.error="f ield "+field+" : should contain only numbers.";
> } else {
> el.value=
> padLeft(el.valu e.replace(/^\d+(\d\d)$/,"$1"), "0", 2);
> }
> break;
> }
>
> if(el.style)
> el.style.border Color = result.error ? "#c00" : "";
>
> return result;
> }
> }
>
> function validate(form){
> var a=[], msg=[], index=1;
>
> // re-test the fields
> a[a.length]=check(form.ele ments[0], "foo1", "empty", "2num");
> a[a.length]=check(form.ele ments[1], "foo2", "empty", "2num");
> a[a.length]=check(form.ele ments[2], "foo3", "empty", "2num");
>
> //analyse the tests
> for(var ii=0; ii<a.length; ii++)
> if(a[ii].error)
> msg[msg.length]=(index++)+" - "+a[ii].error;
>
> //alert the message, if any
> if(msg.length)
> alert(msg.join( "\n"));
>
> //handle form's submission
> return !msg.length;
> }
> </script>
> ---
>
>
> HTH
> Yep.[/color]




THANK YOU IT WORKS FANTASTIC!

[Andrew Thompson]

Re: format a field (input in form) onblur

On Sat, 25 Sep 2004 22:16:35 +1200, WindAndWaves wrote:
[color=blue]
> Cheers - I will have a go at that.[/color]

Could you *please* have a go at trimming lines that
are no longer relevant or needed. Simply posting
one line replies at the bottom of over 100 lines of
earlier post is not the way to go.
<http://www.physci.org/codes/javafaq.jsp#net iquette>

'in-line with trimming' is arguably the best way to
post, for poster and audience alike.

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.lensescapes.com/ Images that escape the mundane

[WindAndWaves]

Re: format a field (input in form) onblur

> Could you *please* have a go at trimming lines that[color=blue]
> are no longer relevant or needed. Simply posting
> one line replies at the bottom of over 100 lines of
> earlier post is not the way to go.
> <http://www.physci.org/codes/javafaq.jsp#net iquette>[/color]

How about the trim in this one? By the way, what does <--SNIP --> mean?

[Andrew Thompson]

Re: format a field (input in form) onblur

On Mon, 27 Sep 2004 13:05:06 +1200, WindAndWaves wrote:
[color=blue][color=green]
>> Could you *please* have a go at trimming lines ..[/color][/color]
...[color=blue]
> How about the trim in this one?[/color]

Excellent.
[color=blue]
>..By the way, what does <--SNIP --> mean?[/color]

<SNIP> (and variants) simply mean a section of text was removed.
I often just put '...' before the text resumes. If the reader
cannot figure that out, there is something wrong with them. ;-)

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.lensescapes.com/ Images that escape the mundane