w3resource

JavaScript: HTML Form validation - checking for Floating point numbers

Checking for Floating point numbers

A floating number has the following parts.

  • A decimal integer.
  • A decimal point ('.').
  • A fraction.
  • An exponent (optional).

The exponent part is an "e" or "E" followed by an integer, which can be signed (preceded by "+" or "-").

Example of some floating numbers:

  • 7.2935
  • -12.72
  • 1/2
  • 12.4e3 [ Equivalent to 12.4 x 103 ]
  • 4E-3 [ Equivalent to 4 x 10-3 ]

Sometimes it is required to input a number with decimal part particularly for quantity, length, height, amounts etc. We can use a floating point number in various ways, here are some examples.

  • No exponent, mandatory integer and fraction and optional sign.
  • No exponent, mandatory sign (+-), integer, and a fraction.
  • Mandatory sign (+-), exponent, integer, fraction.

To check the said format we have used the various regular expression. Following code blocks contain actual codes and we have kept the CSS code part common for all the validations.

CSS Code

li {list-style-type: none;
font-size: 16pt;
}
.mail {
margin: auto;
padding-top: 10px;
padding-bottom: 10px;
width: 400px;
background : #D8F1F8;
border: 1px soild silver;
}
.mail h2 {
margin-left: 38px;
}
input {
font-size: 20pt;
}
input:focus, textarea:focus{
background-color: lightyellow;
}
input submit {
font-size: 12pt;
}
.rq {
color: #FF0000;
font-size: 10pt;
}

Javascript function to check whether a field input contains a number with no exponent, mandatory integer and fraction and optional sign

To get a string contains a number with no exponent, mandatory integer and fraction and optional sign we use a regular expression /^[-+]?[0-9]+\.[0-9]+$/ which allows the said format. Next, the match() method of a string object is used to match the said regular expression against the input value. Here is the complete web document.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - check a Floating Number</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Check whether the field input contains a number with no exponent, mandatory integer and fraction and optional sign</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li> <li><input type="submit" name="submit" value="Submit" onclick="CheckDecimal(document.form1.text1)"/></li> <li>&nbsp;</li> </ul> </form> </div> <script src="check-decimal.js"></script> </body> </html>

JavaScript Code

function CheckDecimal(inputtxt) 
{ 
var decimal=  /^[-+]?[0-9]+\.[0-9]+$/; 
if(inputtxt.value.match(decimal)) 
{ 
alert('Correct, try another...')
return true;
}
else
{ 
alert('Wrong...!')
return false;
}
} 

Flowchart :

Flowchart: JavaScript validation - checking for Floating point numbers

View the example in the browser

Javascript function to check whether a field input contains a number with no exponent, mandatory sign (+-), integer, and fraction

To get a string contains a number with no exponent, mandatory integer, fraction, sign (+ -) we use a regular expression /[-+][0-9]+\.[0-9]+$/ which allows the said format. Next, the match() method of a string object is used to match the said regular expression against the input value. Here is the complete web document.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - check a Floating Number starting with sign</title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail">
<h2>Check whether a field input contains a number with no exponent, mandatory sign (+-), integer, and fraction</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li> <li><input type="submit" name="submit" value="Submit" onclick="CheckDecimal(document.form1.text1)"/></li> <li>&nbsp;</li> </ul> </form> </div> <script src="check-decimal-with-sign.js"></script> </body> </html>

JavaScript Code

function CheckDecimal(inputtxt) 
{ 
var decimal=  /[-+][0-9]+\.[0-9]+$/; 
if(inputtxt.value.match(decimal)) 
{ 
alert('Correct, try another...')
return true;
}
else
{ 
alert('Wrong...!')
return false;
}
} 

Flowchart:

Flowchart: Javascript function to check decimal numbers

View the example in the browser

Javascript function to check whether a field input contains a number starting with mandatory sign (+-), exponent, integer, fraction

To get a string contains a number with a mandatory sign (+ -), exponent integer, fraction, a sign we use a regular expression /^[-+][0-9]+\.[0-9]+[eE][-+]?[0-9]+$/ which allows the said format. Next, the match() method of a string object is used to match the said regular expression against the input value. Here is the complete web document.

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript form validation - check a Floating Number with exponent and starting with sign </title>
<link rel='stylesheet' href='form-style.css' type='text/css' />
</head>
<body onload='document.form1.text1.focus()'>
<div class="mail"><h2>Check whether a field input contains a number starting with mandatory sign (+-), exponent, integer, fraction</h2>
<form name="form1" action="#">
<ul>
<li><input type='text' name='text1'/></li>
<li>&nbsp;</li> <li><input type="submit" name="submit" value="Submit" onclick="CheckDecimal(document.form1.text1)"/></li> <li>&nbsp;</li> </ul> </form> </div> <script src="check-decimal-with-exponent-sign.js"></script> </body> </html>

JavaScript Code

function CheckDecimal(inputtxt) 
var decimal= /^[-+][0-9]+\.[0-9]+[eE][-+]?[0-9]+$/;  
if(inputtxt.value.match(decimal)) 
{ 
alert('Correct, try another...')
return true;
}
else
{ 
alert('Wrong...!')
return false;
}
} 

Flowchart:

Flowchart: Javascript function to check floating numbers in a field

View the example in the browser

Other JavaScript Validation :

Previous: JavaScript: HTML Form validation - checking for all numbers
Next: JavaScript: HTML Form - checking for numbers and letters



JavaScript: Tips of the Day

JavaScript: function and arguments

const person = {
  name: 'Lydia Hallie',
  hobbies: ['coding'],
};

function addHobby(hobby, hobbies = person.hobbies) {
  hobbies.push(hobby);
  return hobbies;
}

addHobby('running', []);
addHobby('dancing');
addHobby('baking', person.hobbies);

console.log(person.hobbies);

The addHobby function receives two arguments, hobby and hobbies with the default value of the hobbies array on the person object.
First, we invoke the addHobby function, and pass "running" as the value for hobby and an empty array as the value for hobbies. Since we pass an empty array as the value for y, "running" gets added to this empty array.
Then, we invoke the addHobby function, and pass "dancing" as the value for hobby. We didn't pass a value for hobbies, so it gets the default value, the hobbies property on the person object. We push the hobby dancing to the person.hobbies array.
Last, we invoke the addHobby function, and pass "bdaking" as the value for hobby, and the person.hobbies array as the value for hobbies. We push the hobby baking to the person.hobbies array.
After pushing dancing and baking, the value of person.hobbies is ["coding", "dancing", "baking"]

Ref: https://bit.ly/2Hcpkm6