表單onsubmit（）不起作用

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

您在代碼中的任何地方都不會調用Submit。 這就是為什么onsubmit處理函數中的函數未觸發的原因。 如果您希望按鈕提交表單，則它必須是一個提交按鈕。

Answer 3

您的示例尚不清楚。 例如，您試圖驗證是否在輸入“ firstname1”中輸入了一個值，但是您在HTML中沒有該元素的標記。

我懷疑您要嘗試驗證表單是否已填寫。 類似於以下內容（可驗證輸入“ firstname1”）將完成此工作：

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

這里的工作示例

以上內容需要jQuery，但也可以轉換為原始JavaScript。

通過包含以下代碼，將jQuery庫加載到文檔的“ head”部分：

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