表单 onsubmit(） 不起作用

Form onsubmit() does not function

本文关键字：不起作用 onsubmit 表单      更新时间：2023-09-26

我想控制我的表单所需的输入文本，我已经在javascript中创建了一个函数。但是当我单击按钮并且我没有填写必填字段时，没有任何消息出现，我可以转到另一页。函数为：

function Validate(){
    // create array containing textbox elements
    var inputs = [document.getElementById('firstname1')];
    var error;
    for(var i = 0; i<inputs.length; i++)
    // loop through each element to see if value is empty
    {
        if(inputs[i].value == '')
        {
            error = 'Please complete all fields.';
            alert(error);
            return false;
            }
    }
 }

而形式的部分是：

<form name="password" onsubmit="return Validate()" method="post" id="password" action="#">
    <input type="submit" value="Proceed"  id="submit1" onclick="displayform2()" class="button" style=" margin-top: -40px;margin-left: 60%;width: 25%" disabled>

我注意到如果我在按钮中推迟 onclick 方法，它可以工作，但我应该在按钮上有这种方法......我该如何解决这个问题？请帮助我

 function displayform2() {
               /*For desktop*/
                if (document.getElementById('desktop1').style.display=='block') {
                    document.getElementById('desktop1').style.display='none';
                    document.getElementById('desktop2').style.display='block';
            document.getElementById('desktop3').style.display='none';
        }
         /*For mobile*/
         if (document.getElementById('mobile1').style.display=='block') {
                    document.getElementById('mobile1').style.display='none';
                    document.getElementById('mobile2').style.display='block';
            document.getElementById('mobile3').style.display='none';
                }}

它会在页面中打开另一个表单...所以当我单击按钮时，第一个表单消失并显示第二个表单

你有这个： var inputs = [document.getElementById('firstname1')];

然后你试着循环通过它。 我敢打赌firstname1是一个字段，所以它要么是空的（如果该字段不存在），要么是一个只有一个元素的数组（字段）。 看起来您正在尝试检查所有必填字段，因此这不起作用。

我不是100%你最终想要做的事情，但如果你使用像jQuery这样的框架，它可能会容易得多;否则，你将不得不为不同的浏览器做一些复杂的案例处理。

在你的代码中，你没有任何地方调用提交。这就是不触发 onsubmit 处理程序中的函数的原因。如果您希望按钮提交表单，则需要是提交按钮。

你的例子有点不清楚。 例如，您正在尝试验证是否已在输入"firstname1"中输入值，但 HTML 中没有该元素的标记。

我怀疑您要做的是验证表格是否已填写。 类似以下内容（验证输入"firstname1"）将完成这项工作：

$(document).on("click", "#submit1", function(){
    if($("#firstname1").val() == "" || $("#firstname1").val() == null){
        alert("Please complete all fields.");
    }
});

这里的工作示例

以上需要jQuery，但也可以转换为vanilla JavaScript。

通过

包含以下代码在文档的"head"部分中加载jQuery库：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
相关文章：