Validating Form Number Type Javascript

Question

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>

You are never calling the function to do the check, that's why the code is failing. — pixel 67, Mar 16 '14 at 23:18

Mitya · Accepted Answer · 2013-09-19T10:52:51.660

1

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/

edited Sep 19 '13 at 10:52

answered Sep 19 '13 at 09:32

Mitya

33,629
9
60
107

It does work - try it in the console: `if (/[^\d\.]/.test("asd")) alert('not num');` – Mitya Sep 19 '13 at 09:39
what does x represent? – user2732815 Sep 19 '13 at 09:51
I tried your code and it works!! But my only problem is now that even though the 'number' has a value it gives me an alert pop out...I'm sorry I am really new to Javascript – user2732815 Sep 19 '13 at 10:18
Using my code, the alert should fire only if the value contains characters other than numbers and dots. If you're getting weird behaviour, set up a JS Fiddle. – Mitya Sep 19 '13 at 10:21
Its my first time using Js Fiddle so I don't really know what I am doing but here's the link http://jsfiddle.net/anon_2000/5UxGp/ – user2732815 Sep 19 '13 at 10:32
1

You need to look into concepts such as event binding and strings vs. variables (you put "x" in quotes, which means it will be tested as a string, rather than the `x` variable. See my update Fiddle. http://jsfiddle.net/5UxGp/1/ – Mitya Sep 19 '13 at 10:52

ZooL · Answer 2 · 2013-09-19T09:48:32.257

1

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;
      }
    }

edited Sep 19 '13 at 09:48

answered Sep 19 '13 at 09:36

ZooL

194
1
4

Please return true if ok – mplungjan Sep 19 '13 at 13:30

score 0 · Answer 3 · edited May 23 '17 at 12:05

0

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);
}

edited May 23 '17 at 12:05

Community

1
1

answered Sep 19 '13 at 09:54

propaganja

123
4
13

Validating Form Number Type Javascript

3 Answers3