473,320 Members | 1,732 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

format a field (input in form) onblur

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
Jul 23 '05 #1
6 9592
WindAndWaves wrote:
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].


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

<URL:http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference/string.html#1194665>
<URL:http://devedge.netscape.com/library/manuals/2000/javascript/1.5/reference/string.html#1194258>
Here's an illustration:

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

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

function check(el, field) {
//controller
var result={error:""};
for(var ii=2; ii<arguments.length; ii++)
if((result=singleCheck(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="field "+field+" : should not be empty.";
}
break;
case "2num" :
if(!/^\d+$/.test(el.value)) {
result.error="field "+field+" : should contain only numbers.";
} else {
el.value=
padLeft(el.value.replace(/^\d+(\d\d)$/,"$1"), "0", 2);
}
break;
}

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

return result;
}
}

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

// re-test the fields
a[a.length]=check(form.elements[0], "foo1", "empty", "2num");
a[a.length]=check(form.elements[1], "foo2", "empty", "2num");
a[a.length]=check(form.elements[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.
Jul 23 '05 #2

"Yann-Erwan Perio" <y-*******@em-lyon.com> wrote in message
news:41***********************@news.free.fr...
WindAndWaves wrote:
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].
Check the manual for the "substring" String method, or the "replace"
String method with a regexp:

<URL:http://devedge.netscape.com/library/...pt/1.5/referen
ce/string.html#1194665> <URL:http://devedge.netscape.com/library/...pt/1.5/referen
ce/string.html#1194258>

Here's an illustration:

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

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

function check(el, field) {
//controller
var result={error:""};
for(var ii=2; ii<arguments.length; ii++)
if((result=singleCheck(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="field "+field+" : should not be empty.";
}
break;
case "2num" :
if(!/^\d+$/.test(el.value)) {
result.error="field "+field+" : should contain only numbers.";
} else {
el.value=
padLeft(el.value.replace(/^\d+(\d\d)$/,"$1"), "0", 2);
}
break;
}

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

return result;
}
}

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

// re-test the fields
a[a.length]=check(form.elements[0], "foo1", "empty", "2num");
a[a.length]=check(form.elements[1], "foo2", "empty", "2num");
a[a.length]=check(form.elements[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.


Cheers - I will have a go at that. Thank you.
Jul 23 '05 #3
"Yann-Erwan Perio" <y-*******@em-lyon.com> wrote in message
news:41***********************@news.free.fr...
WindAndWaves wrote:
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].
Check the manual for the "substring" String method, or the "replace"
String method with a regexp:

<URL:http://devedge.netscape.com/library/...pt/1.5/referen
ce/string.html#1194665> <URL:http://devedge.netscape.com/library/...pt/1.5/referen
ce/string.html#1194258>

Here's an illustration:

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

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

function check(el, field) {
//controller
var result={error:""};
for(var ii=2; ii<arguments.length; ii++)
if((result=singleCheck(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="field "+field+" : should not be empty.";
}
break;
case "2num" :
if(!/^\d+$/.test(el.value)) {
result.error="field "+field+" : should contain only numbers.";
} else {
el.value=
padLeft(el.value.replace(/^\d+(\d\d)$/,"$1"), "0", 2);
}
break;
}

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

return result;
}
}

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

// re-test the fields
a[a.length]=check(form.elements[0], "foo1", "empty", "2num");
a[a.length]=check(form.elements[1], "foo2", "empty", "2num");
a[a.length]=check(form.elements[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.



THANK YOU IT WORKS FANTASTIC!
Jul 23 '05 #4
On Sat, 25 Sep 2004 22:16:35 +1200, WindAndWaves wrote:
Cheers - I will have a go at that.


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#netiquette>

'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
Jul 23 '05 #5
> 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#netiquette>


How about the trim in this one? By the way, what does <--SNIP --> mean?
Jul 23 '05 #6
On Mon, 27 Sep 2004 13:05:06 +1200, WindAndWaves wrote:
Could you *please* have a go at trimming lines ..
... How about the trim in this one?
Excellent.
..By the way, what does <--SNIP --> mean?


<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
Jul 23 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Patrick J. Schouten | last post by:
I am new to ASP/VBScript and I am trying to format a texbox when a user exits it. In Visual Basic you could put the following in the Exit property of the textbox: textbox1 = Format(textbox1,...
2
by: fish | last post by:
Hi, I have an HTML page with a FORM and some input fields. On the fields I wish to do validation as the punters change the field values. If they get it wrong, then I tell them and then wish...
2
by: nntp-service.ohio-state.edu | last post by:
Hey folks - I'm a newbie to java script. I'm trying to make a portable data-validator for fields in an HTML form. Ideally, it would work something like this: <input type="text" name="test"...
7
by: Mike | last post by:
I've been trying for the past week to put a simple code together. I have done a LOT of searching, found scripts showing the functions I would like to use, however when I mix them it all goes wrong,...
5
by: Mike | last post by:
I'm using a script provided by e-mailanywhere, it's a little too big for me. There's 1 text field and 1 password field in a form. OnSubmit, I would like both fields to be validated to look for...
3
by: Santosh | last post by:
Hi, I have a requirement in which, I need to capture a loan amount and the amount of down payment for that loan. According to the requirement, the user is going to enter enter the loan amount and...
6
by: laredotornado | last post by:
Hello, Assuming I have the functions, "isNumber" and "isEmpty", how would I write the HTML INPUT type="text" element such that a person cannot exit the element unless they have typed in a valid...
1
by: filmfanatic | last post by:
In this emal form, I'm trying to consolidate all the input into the TEXTAREA portion and then have it emailed to a specific person. I've tried the onClick and onBlur commands but only one field's...
10
meenakshia
by: meenakshia | last post by:
hi forum:) i have a form in which i have four input fields for pieces to be entered and 4 fields for amount what i want is that the first pieces-t1 should be visible and rest three should not show...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.