Question

我遇到了JS问题。我的验证似乎正在工作，检查用户输入的有效数字不为零，但表单仍在提交。我已经多次看到这个问题，但我找不到适合我的解决方案。任何想法都会很棒。

我的Javascript

function checkNotZero()
{
    var theNumber = document.getElementById("theNumber").value;
    var str = /^\+?[1-9]\d*$/.test(theNumber);
    if ( str == false ) {
        alert('You have not entered a valid number');
        return false;
    } else {
        document.getElementById('numberCheck').submit();   
    }
}

我的HTML

<form action="/next.php" method="post" id="numberCheck">
<input type="text" id="theNumber" value="0">
<button id="submitButton" OnClick="checkNotZero();">Add to Basket</button>
</form>

Answer 1

使用<input type="submit">作为提交按钮。
在form的提交事件而不是某些onclick上进行验证。表单可以通过其他方式提交，而不仅仅是单击按钮（例如，按“输入”，或按程序通过代码）。
首选.addEventListener用于将事件附加到元素的属性。使用preventDefault()阻止表单提交。

Answer 2

嗨，对于'验证表单'的上述要求，应该进行java脚本验证表单提交时。按照以下方法，表格将不会提交直到并且除非验证是正确的。

<html>
<head>
<script type="text/javascript">
function checkNotZero()
{
var theNumber = document.getElementById("theNumber").value;
var str = /^\+?[1-9]\d*$/.test(theNumber);
if ( str == false ) {
alert('in');
alert('You have not entered a valid number');
return false;
} else {
    document.getElementById('numberCheck').submit();   
}
}
</script>
</head>
<body>
<form action="/next.php" method="post" id="numberCheck"  onsubmit="return       
checkNotZero()">
<input type="text" id="theNumber" value="0">
 <button id="submitButton">Add to Basket</button>
</form>
</body>
</html>

唯一的变化是<form action="/next.php" method="post" id="numberCheck" onsubmit="return checkNotZero()"> 不要在提交按钮中使用onclick事件。

JS验证错误，表单仍在提交

2 个答案: