Question

我通过点击“提交”链接提交以下简单测试来验证表单上的输入。不幸的是，它没有验证表格。

<form id="testform" action = "?blah" onsubmit="return validateForm()">
  <input type="text" name="testinput" >
  <a href="#" onclick="document.getElementById('testform').submit();">Submit</a>
</form>

<script>
function validateForm() {
    var x = document.forms["testform"]["testinput"].value;
    if (x == null || x == "") {
        alert("Field must be filled out");
        return false;
    }
}
</script>

如果我用按钮而不是链接替换提交，那么它会正确验证表单。但是，如果我在上面的示例中使用链接提交时如何确保验证？

Answer 1

尝试创建一个在点击链接时触发验证的功能。

示例：

<form id="testform" action = "?blah" onsubmit="return validateForm()">
  <input type="text" name="testinput" >
  <a href="#" onclick="return false; submitForm()">Submit</a>
</form>

<script>
function validateForm() {
    var x = document.forms["testform"]["testinput"].value;
    if (x == null || x == "") {
        alert("Field must be filled out");
        return false;
    }
}
function submitForm() {
    if (validateForm()) {
        document.getElementById('testform').submit();
    }
}
</script>

注意：我强烈建议您将JavaScript与HTML解耦，但这不在您的问题范围内。

Answer 2

这对我有用。它利用变量和指定的方法来 testform ：

<form id="testform" action = "?blah" onsubmit="return formValid">
  <input type="text" name="testinput" >
  <a href="#" onclick="document.getElementById('testform').onsubmit();">Submit</a>
</form>

<script>

var formValid = false;

document.getElementById('testform').onsubmit = function(){
    console.log('submit');
    formValid = validateForm();
};

function validateForm() {
    var x = document.forms["testform"]["testinput"].value;
    if (x == null || x == "") {
        alert("Field must be filled out");
        return false;
    }
}
</script>

Answer 3

这是一种jQuery风格的方式。

<form id="testform" action = "?blah" onsubmit="return validateForm()">
    <input type="text" name="testinput" />
  <a href="#" onclick="$('form').submit();">Submit</a>
</form>

<script type="text/javascript">
function validateForm() {
    if ($.trim($("[name=testinput]").val()) == "") {
        alert("Field must be filled out");
        return false;
    }
}
</script>

如何通过链接而不是按钮提交表单时验证表单onsubmit

3 个答案: