Question

我想控制所需输入文本的表单，并且我已经在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';
                }}

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

Answer 1

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

然后你尝试循环。我打赌firstname1是一个字段，所以它是null（如果该字段不存在）或只有一个元素（字段）的数组。看起来您正在尝试检查所有必填字段，因此无效。

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

Answer 2

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

Answer 3

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

我怀疑你要做的是验证表单是否已填写。类似下面的内容（验证输入“firstname1”）将完成这项工作：

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

工作示例here

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

通过包含以下代码将jQuery库加载到文档的“head”部分：

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

表单onsubmit（）不起作用

3 个答案: