javascript: form length validation

Question

I think, I got a validation problem on my javascript. It still submits while the form is invalid. Specifically, when user inputs more than 10 character in length, it still submits the form into database, while it should display alert. Here's the script:

<script type="text/javascript">
function validateForm()
{
var numericExpression = /^[0-9]+$/;
var a=document.forms["purchaseform"]["no"].value;
var b=document.forms["purchaseform"]["qty"].value;
if (a==null || a=="")
  {
  alert("Form number must be filled out");
  return false;
  }
if(a.match(numericExpression))
  {
  return true;
  }
  else
  {
  alert("Form number must be filled with numbers only");
  return false;
  }
if(a.length > 10) //i got a problem with this one i think
  {
  alert("Form number must not be greater than 10 character length");
  return false;
  }
if (b==null || b=="")
  {
  alert("Quantity must be filled out");
  return false;
  }
if(b.match(numericExpression))
  {
  return true;
  }
  else
  {
  alert("Quantity must be filled with numbers only");
  return false;
  }
}
</script>

And here is the form snippet:

<form name="purchaseform" method="post" onsubmit="return validateForm()" action="submitpurchaseadmin.php">
<table>
    <tr>
        <td>Form number</td>
        <td><input type="text" name="no"></td>
    </tr>
    <tr>
        <td>Category</td>
        <td>
        <select id="cat" name="cat">
        </select>
        </td>
    </tr>
    <tr>
        <td>Item</td>
        <td>
        <select id="item" name="item">
        </select>
        </td>
    </tr>
    <tr>
        <td>Quantity</td>
        <td><input type="text" name="qty"></td>
    </tr>
    <tr>
        <td>Date</td>
        <td><input type="text" name="date" value="<?php echo date("d-m-Y"); ?>"></td>
    </tr>
    <tr>
        <td colspan="2" align="center"><input type="submit" name="submit" value="Save"></td>
    </tr>
</table>
</form>

http://stackoverflow.com/questions/4743730/what-is-console-log-and-how-do-i-use-it — Steven Wexler, Dec 16 '13 at 02:27

score 2 · Accepted Answer · answered Dec 16 '13 at 02:26

2

Add an ID to those inputs and do

function validateForm() {
    var a = document.getElementById("no").value;
    var b = document.getElementById("qty").value;

    if (!a.length) {
        alert("Form number must be filled out");
        return false;
    }else if (!a.match(/^[0-9]+$/)) {
        alert("Form number must be filled with numbers only");
        return false;
    }else if (a.length > 10) {
        alert("Form number must not be greater than 10 character length");
        return false;
    }else if (!b.length) {
        alert("Quantity must be filled out");
        return false;
    }else if (!b.match(/^[0-9]+$/)) {
        alert("Quantity must be filled with numbers only");
        return false;
    }
}

FIDDLE

answered Dec 16 '13 at 02:26

adeneo

312,895
29
395
388

thanks, it validated correctly. may i ask what's the difference between using var a=document.forms["purchaseform"]["no"].value; and var a = document.getElementById("no").value;? – Rendy Setiadi Dec 16 '13 at 02:32
Using the global namespace to access elements just seems like a bad idea to me, but that's not really where the issue was, the issue was the way the if / else was setup, and especially when matching the numbers regex, as noted by Leo, the `if (match(regex)) else {...` always returns from the function, so the rest of it never executes. – adeneo Dec 16 '13 at 02:44

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

onsubmit doesn't automatically prevent the form from submitting, you need to use preventDefault inside your onsubmit function.

See here:

onsubmit method doesn't stop submit

Of note – while Adeneo's fix addresses blank name and quanity, it does not seem to be alerting on the length of a.

edited May 23 '17 at 11:51

Community

1
1

answered Dec 16 '13 at 02:27

msanteler

2,163
1
16
21

score 0 · Answer 3 · answered Dec 16 '13 at 02:29

0

Maybe the problem is here: if(a.match(numericExpression)), when user inputs more than 10 character in length, this if statement will also return true.

answered Dec 16 '13 at 02:29

Leo Zhao

544
7
18

javascript: form length validation

3 Answers3