Question

我正在构建一个使用一个标签表单和一个提交按钮的cordova应用程序，问题是这是一个移动应用程序，所以当我点击我的文本输入时，写点东西而不是点击我的手机的确认按钮键盘，我的问题发生了。因为当我点击这个按钮时，我想移动到下一个输入，但我的应用程序执行我的提交方法。我必须对我的应用程序做什么传递给下一个输入，如果这是我的最后一个输入，那么验证是否所有输入都已填充。

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

表单html，输入提交

1 个答案: