CODEWITHSUNDEEP
javascripthtmlvalidation
user2732815
user2732815

Reputation: 55

Validating Form Number Type Javascript

Hi I've got this problem. In my html code I can't seem to validate my input type "numbers". Iv'e used this code to try and validate it but it does not work 

function validateForm()
{
var x=document.forms["form_name"]["number_name"].value;
if (x==null || x=="")
  {
  alert("The following must be filled out");
  return false;
  }
}

I took this code from a web site that validates an input type "text" not numbers. I'm trying to implement a working "number" validation to my full html code. Btw this a sample of my form:

<form action = "test.php" method = "post" onsubmit = "return validateForm()" name ="form_name">
<input type = "number" min = "0" placeholder = "0" name = "number_name" size = "2"/>

I am wondering if it is possible to use the javascript valdiation above to validate the number form or is there an easier way to do it.

*In-Depth * I made a quick html code for my first question and made multiple form of 'number'. It's incomplete... I decide to test one 'number' before implementing the code for the whole form This is my code so far:

<html>
    <head>
    <script language="javascript">
    function validateForm()
    {
    var x=document.forms["order"]["cappuccino_qty"].value;
    if (x >= 0 || x < 0);
    {
    alert("The following must be filled out");
    return false;
    }
    }
    </script>   
    <body>              
    <form action = "test.php" method = "post" onsubmit = "return validateForm()" name ="order">
                <label class = "field" for = "Cappucino">Cappuccino
                <input type = "number" min = "0" placeholder = "$3.75" name = "cappuccino_qty" size = "2"/><br>
                <label class = "field" for = "Espresso">Espresso
                <input type = "number" min = "0" placeholder = "$3.00" name = "espresso_qty" size = "2"/><br>
                <label class = "field" for = "Double Espresso">Double Espresso
                <input type = "number" min = "0" placeholder = "$4.25" name = "double_espresso_qty" size = "2"/><br>
                <label class = "field" for = "Flat White">Flat White
                <input type = "number" min = "0" placeholder = "$3.75" name = "flat_white_qty" size = "2"/><br>
                <label class = "field" for = "Latte">Latte  
                <input type = "number" min = "0" placeholder = "$3.50" name = "latte_qty" size = "2"/><br>
                <label class = "field" for = "Ice Coffee">Ice Coffee
                <input type = "number" min = "0" placeholder = "$2.50" name = "ice_qty" size = "2"/><br>
                <input type = "submit" value = "submit" name = "submit"/>
                <p>
       </form>
       </body>  
       </head>
       </Html>

Upvotes: 0

Views: 7849

Answers (3)

Mitya
Mitya

Reputation: 34628

Change

if (x==null || x=="")

to

if (/[^\d\.]/.test(x))

That checks for any non-numerical or period characters (assuming you want to allow decimals).

[Edit]

See updated Fiddle: http://jsfiddle.net/5UxGp/1/

Upvotes: 1

propaganja
propaganja

Reputation: 123

You are only testing the variable if it is null or empty but when you input characters on it it jump out on your if statement. Try using this function. See reference here if needed: Validate decimal numbers in JavaScript - IsNumeric(). Hope that helps.

function isNumber(x) {
    return !isNaN(parseFloat(x)) && isFinite(x);
}

Upvotes: 0

ZooL
ZooL

Reputation: 194

A simple way

function validateForm()
{
var x=document.forms["form_name"]["number_name"].value;
if (!(x >= 0) || !(x < 0))
  {
  alert("The following must be filled out");
  return false;
  }
}

By the way if 0 is minimum in your form

 function validateForm()
    {
    var x=document.forms["form_name"]["number_name"].value;
    if (!(x >= 0))
      {
      alert("The following must be filled out");
      return false;
      }
    }

Upvotes: 1

Related Questions