表单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()。我不清楚你为什么要这样做，或者你想要完成什么。