表單html，鍵入提交

Question

我正在構建一個使用一個標籤表單的提交按鈕的科爾多瓦應用程序，問題是這是一個移動應用程序，所以當點擊我的文本輸入時，寫點東西而不是點擊確認我的手機鍵盤按鈕，我的問題發生。因爲當我點擊這個按鈕時，我想移動到下一個輸入，但我的應用程序執行我的提交方法。我必須對我的應用程序進行下一個輸入，如果只有這是我的上一個輸入，那麼請驗證是否所有輸入都已填充。

這是我的html代碼：

<form id="form"> 
    <label for="idNome"> Nome: </label> <input name="nome" id="idNome" 
     placeholder="Seu Nome" required autofocus autocomplete="on"><br> 

    <label for="idCpf"> CPF:</label> <input type="tel" 
      autocomplete="on" name="cpf" id="idCpf" placeholder="Seu CPF" 
      required> <img style="display: none;" id="idValidadeCPF" 
      src=""><br> 

    <label for="idEndereco"> Endereço:</label> 
    <textarea id="idEndereco" rows="1" cols="30"></textarea><br> 

    <label for="idMensagem"> Mensagem: </label><br> 
    <textarea cols=30 id="idMensagem" rows="10" name="mensagem" 
      maxlength="500" wrap="hard" 
      placeholder="Informe datalhes sobre o seu problema." required></textarea><br> 

    <input type="submit" value="Enviar" onclick="submitForm()" /> 

這是我submitForm方法

function submitForm(){ 
    document.getElementById('form').onsubmit= function(e){ 
     e.preventDefault(); 
     alert("Todos os campos devem ser preenchidos"); 
    } 
} 

Answer 1

你submitForm()功能實際上並不做它所包含的邏輯，它只是設置一個處理程序。它基本上是這樣做的：

document.getElementById('form').onsubmit = someFunction; 

而就是這樣。無論在someFunction裏面什麼都不會被執行，直到下一次處理程序被調用。但它聽起來像你想馬上被調用。

當您提交表單時，不要指定提交處理程序，而應在頁面加載時立即將其分配。事情是這樣的：

<form id="form"> 
    ... your form 
    <input type="submit" value="Enviar" /> 
</form> 
<script type="text/javascript"> 
    document.getElementById('form').onsubmit = function(e){ 
     e.preventDefault(); 
     alert("Todos os campos devem ser preenchidos"); 
    } 
</script> 

請注意，我已經刪除了submitForm功能完全，以及從中調用它的input刪除它。這種情況並不是真的需要。 input的類型爲submit，因此它會默認提交表單。但是，當頁面加載時，JavaScript會將您的匿名函數添加爲窗體的submit事件的處理函數，因此當input提交form時，此函數將運行。

值得注意的是，這將阻止表單實際上被提交，但。您只提交處理程序會阻止默認操作（提交表單）並顯示alert()。我不清楚你爲什麼要這樣做，或者你想要完成什麼。