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]

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>

 

[WindAndWaves]

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/referen
ce/string.html#1194665><URL:http://devedge.netscape.com/library/manuals/2000/javascript/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.

 

[WindAndWaves]

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/referen
ce/string.html#1194665><URL:http://devedge.netscape.com/library/manuals/2000/javascript/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!

 

[WindAndWaves]

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?