表单html，键入提交

Question

我正在构建一个使用带有提交按钮的标签形式的cordova应用程序，问题是这是一个移动应用程序，因此当单击我的文本输入时，编写一些内容，而不是单击我的移动键盘的确认按钮，问题发生了。 因为当我单击该按钮时，我想移至下一个输入，但是我的应用程序执行了Submit方法。 我对应用程序所做的操作仅在这是我的最后一个输入时才传递到下一个输入，因此请验证是否所有输入都已填充。

这是我的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内部的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() 。 我不清楚您为什么要这么做或想要完成什么。