Sunday, November 22, 2009

Validate Decimal Number


How to validate decimal number using JavaScript?




Following example shows you to validate a decimal number in javascript as a client side validation




In some situations you may want to validate a decimal number before submitting your form. It is good practice to validate input data before they sent to the web server. Using a simple javascript you can validate a decimal number. A decimal number contains 0 to 9 integer values and only one decimal point. There is an in-built function isNaN() that can use to validate a decimal number in javascript.
Using following javascript you can check
whether a particular number is a valid decimal number of not.


Demo- Validate Decimal Number In JavaScript
1. Validate decimal number.
Enter a Decimal Number




view code



2. How to validate a decimal number on key press event.



Enter a number

view code



3. Use following code to validate a decimal number with specified decimal places.



Number of Decimal Points

view code
Enter Decimal Number







Enter a value and click on submit button to test whether input is a valid decimal number or not. If you enter an invalid decimal number JavaScript alerts you, you have entered an invalid number. Otherwise it alerts the input is a valid decimal number.







Bookmark and Share


1. Example code for validate a decimal number in JavaScript.

JavaScript Code
<script type="text/javascript" language="javascript">

<!--

function validateDecimalNumber(){

var value = document.getElementById("textDecimalNumber").value;

var message = "Please enter a decimal value";

if(value!=""){

if(isNaN(value)==true){

alert(message);

return false;

}else{

alert(value+" is a valid decimal number");

return true;

}

}else{

alert(message);

return false;

}

return false;

}

-->

</script>
Html Code


<html>

 <head>

  <title>How to Validate Decimal Number in JavaScript </title>

 </head>

<body>

<table border="0">

<tr>

<td>Enter Decimal Number </td>

<td>

<input name="textDecimalNumber" type="text" id="textDecimalNumber" />

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>

<input name="btnDecimalNumberValidator" type="submit" id="btnDecimalNumberValidator" onclick="javascript:validateDecimalNumber();" value="Validate" />

</td>

</tr>

</table>

</body>

</html>

Validate decimal number using JavaScript

2. Example code for validate a decimal number on key press event in JavaScript.

JavaScript Code
<script type="text/javascript" language="javascript">

<!--

function validate(){

var value = document.getElementById("txtDecimal").value;

var message = "Please enter a decimal value";

if(isNaN(value)==true){

alert(message);

document.getElementById("txtDecimal").select();

return false;

}else{

return true;

}

}

-->

</script>
Html Code


<html>

 <head>

  <title>How to Validate Decimal Number in KeyPress Event in JavaScript </title>

 </head>

<body>

<table border="0">

<tr>

<td>Enter Decimal Number </td>

<td>

<input name="textDecimalNumber" type="text" id="textDecimalNumber" />

</td>

</tr>

<tr>

<td>&nbsp;</td>

<td>

<input name="txtDecimal" type="text" id="txtDecimal" onkeyup="javascript:validate();" />

</td>

</tr>

</table>

</body>

</html>

Validate a decimal number on KeyPress Event using JavaScript

3. Custom Decimal number validation using JavaScript.

<script type="text/javascript" language="javascript">

<!--
//------------------------------------------------------------------

function showDecimalPointError(){

var message="Please enter an integer value";

alert(message);

document.getElementById("textDecimalPoints").value="2";

return false;

}

//------------------------------------------------------------------

function CheckDecimalPoints(){

var decimalPoints=document.getElementById("textDecimalPoints").value;



for(var x=0;x<decimalPoints.length;x++){

if(decimalPoints.charAt(x)=="."){

showDecimalPointError();

}

if(isNaN(decimalPoints.charAt(x))){

showDecimalPointError();

}

}

return true;

}

//------------------------------------------------------------------

function customValidation(){

var preferredDecimalPoints=document.getElementById("textDecimalPoints").value;

var decimalPointCount=0;

var decimalNumber = document.getElementById("txtCustomValidation").value;

var pointFound=false;

var decimalPlaces=0;



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

var _char=decimalNumber.charAt(i);



if(pointFound==true){

decimalPlaces++;

}

if(_char=="."){

pointFound=true;

decimalPointCount++;

if(decimalPointCount>1){

break;

}

}else if(isNaN(_char)){

setError()

return false;

}

}

if(decimalPointCount!=1){

setError()

return false;

}else if(decimalPlaces!=preferredDecimalPoints){

setError()

return false;

}else if(isNaN(decimalNumber)){

setError()

}else{

alert(decimalNumber+" is a valid decimal number");

}

return true;

}

//------------------------------------------------------------------

function setError(){

var message="Please enter a valid decimal number";

alert(message);

document.getElementById("txtCustomValidation").select();

document.getElementById("txtCustomValidation").focus();

return false;

}

//-------------------------------------------------------------------->

</script>
Html Code
<html>

 <head>

  <title>How to Validate Decimal Number in JavaScript </title>

 </head>

<body><table border="0">

<tr>

<td>Number of Decimal Points </td>

<td><label>

<input name="textDecimalPoints" type="text" id="textDecimalPoints" size="5" value="2" onkeyup="javascript:CheckDecimalPoints();" " />

</label></td>

</tr>

<tr>

<td>Enter Decimal Number </td>

<td><label>

<input name="txtCustomValidation" type="text" id="txtCustomValidation" />

</label></td>

</tr>

<tr>

<td>&nbsp;</td>

<td><label>

<input name="btnCustomValidation" type="submit" id="btnCustomValidation" value="Validate" onclick="javascript:customValidation();" />

</label></td>

</tr>

</table></body>

</html>
How to validate decimal number using JavaScript

 »   How to get screen resolution in JavaScript
 »   How to limit characters in textarea using JavaScript
 »   How to validate decimal number in JavaScript
 »   How to validate an email address in JavaScript
 »   How to validate date using JavaScript
 »   JavaScript String functions
 »   How to validate multiple select list box in JavaScript
 »   How to generate random numbers in JavaScript
 »   How to validate multiple check box in JavaScript
 »   How to validate user login in JavaScript
 »   How to validate drop down list in JavaScript
 »   How to validate radio button group in JavaScript
 »   How to create JavaScript alerts
 »    How to create popup windows in JavaScript
 »   How to count words in a text area using JavaScript

©-Copyright By Duminda Chamara
JavaScript Validation  

Posted by Duminda Chamara at 10:23 PM

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)