/    Sign up×
Community /Pin to ProfileBookmark

Numeric Validation

Copy linkTweet thisAlerts:
May 25.2005

Hi,

I have 10 text boxes and I need to validate them for:

1) Numeric
2) Allow Decimal values

Could you help me please…

Thanks!!!

to post a comment
JavaScript

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@CharlesMay 25.2005 — <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="Content-Script-Type" content="text/javascript">
<meta name="Content-Style-Type" content="text/css">
<title>Example</title>

<script type="text/javascript">
<!--
onload = function () {
var e, i = 0;
while (e = document.forms[0].elements[i++]) {
if (e.type == 'text' && e.className == 'number') e.onchange = function () {
if (isNaN (this.value)) {alert (); this.value = ''; this.focus()}
}
}
}

function check (f) {
var e, i = 0;
while (e = f.elements[i++]) {
if (e.type == 'text' && !/S/.test (e.value)) {alert ('Field "' + e.previousSibling.data +'" is required.'); e.focus(); return false}
}
}
// -->
</script>

<style type="text/css">
<!--
fieldset {padding:1ex; width:15em}
label {display:block; margin:1ex; text-align:right}
input {margin-left:1em}
button {display:block; margin:1ex auto}
-->
</style>

</head>
<body>
<form action="some-script.pl" onsubmit="return check (this)">
<fieldset>
<legend>Numbers</legend>
<label>One<input class="number" type="text"></label>
<label>Two<input class="number" type="text"></label>
<label>Three<input class="number" type="text"></label>
<label>Four<input class="number" type="text"></label>
<label>Five<input class="number" type="text"></label>
<label>Six<input class="number" type="text"></label>
<label>Seven<input class="number" type="text"></label>
<label>Eight<input class="number" type="text"></label>
<label>Nine<input class="number" type="text"></label>
<label>Ten<input class="number" type="text"></label>
<button type="submit">Submit</button>
</fieldset>
</body>
</html>
Copy linkTweet thisAlerts:
@ASPDEVauthorMay 25.2005 — this is what I am doing...

function Validate(){

var xElem = document.forms.frmMIIP.elements;

for(i=0;i<xElem.length;i++){

if(xElem[i].type=="text"){

if(!xElem[i].value.length==0 || !isNaN(xElem[i].value)){

xElem[i].style.backgroundColor="white";

}

if(xElem[i].value.length==0 || isNaN(xElem[i].value)){

Error='Error';

xElem[i].focus();

xElem[i].style.backgroundColor="pink";

}

}

}

}



1) Now, it works good for NUMERIC checks...but i need to allow the user to put decimal numbers also...upto 2 decimal places...



2) also I have 4 other fields on the form which I do not want to validate...

but i they are also geeting validated...since in the above function i have

if(xElem[i].type=="text") so it is validating all the form fields...



3) how can i not allow it to validate for these 4 fields which are also of type text...





Thanks!!!
Copy linkTweet thisAlerts:
@CharlesMay 25.2005 — Follow my example above.
Copy linkTweet thisAlerts:
@ASPDEVauthorMay 25.2005 — Awesome!!!

thank you...

one last question...

how can i limit the user to enter only till 2 decimal places with the above function...

Thanks!!!
Copy linkTweet thisAlerts:
@CharlesMay 25.2005 — Give this a try:&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;meta name="Content-Script-Type" content="text/javascript"&gt;
&lt;meta name="Content-Style-Type" content="text/css"&gt;
&lt;title&gt;Example&lt;/title&gt;

&lt;script type="text/javascript"&gt;
&lt;!--
onload = function () {
var e, i = 0;
while (e = document.forms[0].elements[i++]) {
if (e.type == 'text' &amp;&amp; e.className == 'number') e.onchange = function () {
if (isNaN (this.value)) {alert (); this.value = ''; this.focus()} else {this.value = Number (this.value).toFixed (2)}
}
}
}

function check (f) {
var e, i = 0;
while (e = f.elements[i++]) {
if (e.type == 'text' &amp;&amp; !/S/.test (e.value)) {alert ('Field "' + e.previousSibling.data +'" is required.'); e.focus(); return false}
}
}
// --&gt;
&lt;/script&gt;

&lt;style type="text/css"&gt;
&lt;!--
fieldset {padding:1ex; width:15em}
label {display:block; margin:1ex; text-align:right}
input {margin-left:1em}
button {display:block; margin:1ex auto}
--&gt;
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;form action="some-script.pl" onsubmit="return check (this)"&gt;
&lt;fieldset&gt;
&lt;legend&gt;Numbers&lt;/legend&gt;
&lt;label&gt;One&lt;input class="number" type="text"&gt;&lt;/label&gt;
&lt;label&gt;Two&lt;input class="number" type="text"&gt;&lt;/label&gt;
&lt;label&gt;Three&lt;input class="number" type="text"&gt;&lt;/label&gt;
&lt;label&gt;Four&lt;input class="number" type="text"&gt;&lt;/label&gt;
&lt;label&gt;Five&lt;input class="number" type="text"&gt;&lt;/label&gt;
&lt;label&gt;Six&lt;input class="number" type="text"&gt;&lt;/label&gt;
&lt;label&gt;Seven&lt;input class="number" type="text"&gt;&lt;/label&gt;
&lt;label&gt;Eight&lt;input class="number" type="text"&gt;&lt;/label&gt;
&lt;label&gt;Nine&lt;input class="number" type="text"&gt;&lt;/label&gt;
&lt;label&gt;Ten&lt;input class="number" type="text"&gt;&lt;/label&gt;
&lt;button type="submit"&gt;Submit&lt;/button&gt;
&lt;/fieldset&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@ASPDEVauthorMay 26.2005 — Hi Charles,

the function works on the onchange event...

as soon as i move out of a text box it calls the function...

is it possible to call this function on click event of Submit button...and it validates all the fields at once...

Thanks!!!
Copy linkTweet thisAlerts:
@CharlesMay 26.2005 — But it's easier on the user to get feedback immediately with each error.
Copy linkTweet thisAlerts:
@ASPDEVauthorMay 26.2005 — I agree with you...

but these users want a consolidated error on click of submit button...and I need to mark the erroneous fields to pink color...and also they changed the number of decimal places from 2 to 4.

so i modified your script as follows:

<!--

onload = function () {

var e, i = 0;

while (e = document.forms[0].elements[i++]) {

if (e.type == 'text' && e.className == 'number') e.onchange = function () {

if (!this.value.length==0 || !isNaN (this.value)) {

this.style.backgroundColor="white";

}

if (this.value.length==0 || isNaN (this.value)) {

alert ('Please enter only numeric values.nIf blank then enter zero "0".n');

this.style.backgroundColor="pink";

this.focus();

}

else {

if(this.value != 0){

this.value = Number (this.value).toFixed (4)

}

}

}

}

}

function check (f) {

var e, i = 0;

while (e = f.elements[i++]) {

if (e.type == 'text' && !/S/.test (e.value)) {alert ('Field "' + e.previousSibling.data +'" is required.'); e.focus(); return false}

}

}

// -->

could you please help me make this happen on click of Submit button...

Thanks!!!
Copy linkTweet thisAlerts:
@UltimaterMay 26.2005 — The onsubmit event calls the check() function and nothing else. The only thing that you should replace or edit is the check function.

Replace:
<i>
</i>e.focus();

with something like:
<i>
</i>[color=royalblue]e.style.backgroundColor="pink";[/color]
e.focus();
Copy linkTweet thisAlerts:
@ASPDEVauthorMay 26.2005 — I tried your solution but it doesnt seem to work...

I have the function below for Numeric Check on the text boxes...

function Validate(){

var xElem = document.forms.frmtest.elements;

var i=0;

for(i=0;i<xElem.length;i++){

if(xElem[i].type=="text" && xElem[i].className=='number'){

if(!xElem[i].value.length==0 || !isNaN(xElem[i].value)){

xElem[i].style.backgroundColor="white";

}

if(xElem[i].value.length==0 || isNaN(xElem[i].value)){

Error='Error';

xElem[i].focus();

xElem[i].style.backgroundColor="pink";

}

}

}

if(Error != ""){

alert('Please enter only numeric values.nIf blank then enter zero "0".n');

return false;

}


return true;

}



can you help me just add the following in above function:

[B]- allow upto 4 decimal places (if more than 4 decimal places then prompt an alert to user)[/B]

and this is the HTML:

<body>

<form name="frmtest">

<input name="INCENSTD1" class="number" type="text" maxlength="8" value="">

<input name="INCENSTD2" class="number" type="text" maxlength="8" value="">

<input name="INCENSTD3" class="number" type="text" maxlength="8" value="">

<input name="INCENSTD4" class="number" type="text" maxlength="8" value="">

<input name="INCENSTD5" class="number" type="text" maxlength="8" value="">

<input name="INCENSTD6" class="number" type="text" maxlength="8" value="">

<input name="INCENSTD7" class="number" type="text" maxlength="8" value="">

<input name="INCENSTD8" class="number" type="text" maxlength="8" value="">

<input name="INCENSTD9" class="number" type="text" maxlength="8" value="">

<input name="INCENSTD10" class="number" type="text" maxlength="8" value="">



<input type="Submit" value="Save" onclick="return Validate()">

</form>

</body>

</html>



Thanks!!!
Copy linkTweet thisAlerts:
@UltimaterMay 26.2005 — Returning false to an onclick event doesn't stop a form from submitting because they are two seperate events.

Remove your INPUT tag's ONCLICK event and add an ONSUBMIT event to your FORM tag.
&lt;form action="some-script.pl" onsubmit="return Validate()"&gt;
Copy linkTweet thisAlerts:
@ASPDEVauthorMay 27.2005 — Hi Charles/Ultimater,

This was the function I was looking for:

for(i=0;i<xElem.length;i++){

if(xElem[i].type=="text" && xElem[i].className=='number'){

var Legal = /^(0|[1-9]d{0,8})(.d{0,4}?)?$/.test(xElem[i].value);


if(Legal){

xElem[i].style.backgroundColor="white";

}


if(!Legal){

xElem[i].focus();

xElem[i].style.backgroundColor="pink";

Error=false;

}


}

}



The above would allow 4 decimal places.



I could finally figure out...not so good with javascript..

but you guys helped this novice learn...



thanks a ton...both of u...appreciate your help ?



Thanks!!!
×

Success!

Help @ASPDEV spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...