javascript: form length validation - Stack Overflow

admin管理员组

文章数量:1332896

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>

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>

• javascript

Share Improve this question Follow edited Dec 16, 2013 at 2:23 peterh 1 asked Dec 16, 2013 at 2:16 Rendy SetiadiRendy Setiadi 5722 gold badges44 silver badges1010 bronze badges 3

• what does console.log(a) display? – Steven Wexler Commented Dec 16, 2013 at 2:22
• using document.write syntax? – Rendy Setiadi Commented Dec 16, 2013 at 2:25
• stackoverflow./questions/4743730/… – Steven Wexler Commented Dec 16, 2013 at 2:27

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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

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.

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.

本文标签： javascript form length validationStack Overflow