Question

我正在jQueryMobile和PhoneGap中构建一个应用程序。我有一种方法来验证在Chrome和我的Nexus S Android手机上测试时效果很好的表单，但我不确定是否可以在所有设备上运行。

情况就是这样：

我有一些简单的表格。用户输入的数据存储在本地。所以我不需要POST或GET请求（事实上，我想像瘟疫一样避免它们）。我可以创建一些输入和一个按钮，并在按钮上添加一个单击处理程序，以便一切正常工作。

除了我非常喜欢HTML5表单验证的东西。并且（大部分）仅在表单上触发submit事件时才会进行验证。所以我选择将输入和按钮放在表单元素中，使一个按钮成为提交按钮，并监听在表单上触发的提交事件。另一种方法（此处显示为“删除”按钮）只是在不使用提交过程的情况下单击按钮。毕竟，如果用户想要删除某个项目，则无需验证该表单（无论如何都是这样）。

<form id="oneExpenseForm" action="javascript:void(0);" method=''>
    <button type="submit" id="submitExpense">Save</button>
    <button id="deleteExpense">Delete</button>
</form>

<script>
    $('#oneExpenseForm').on('submit',function(){
        submitExpense();//This function takes care of everything I want
    })
</script>

这似乎工作正常。我也尝试过以不同方式设置表单操作：

<form id="oneExpenseForm" action="submit" method=''>

但是这导致浏览器启动GET请求，导致页面重新加载（使用jQueryMobile时这是一个非常糟糕且不需要的东西）。

我担心的是，我可能会在某些浏览器中设置失败。毕竟，某些浏览器可能会看到此操作属性...

  action="javascript:void(0);"

...根本不解雇提交事件的原因。那会很糟糕，因为我需要提交事件来激活验证和

我在这里冒了不必要的风险吗？或者，即使表单操作设置为null，void等，所有浏览器都会触发提交事件吗？

还有一件事：我当然可以指定......

action="javascript:submitExpense();"

...在HTML文件中。但这是我想要避免的，因为我用混淆保护我的Js代码。这涉及将函数名称更改为不可读的代码，如aR3df（）;使用一个特殊的软件。我不希望每次发布更新时都不必查找混淆的名称并在HTML中输入它们。

编辑：在第一个答案进来后使用e.preventDefault（）并且不起作用后，我认为可能与我在另一个函数中绑定提交事件处理程序有关。那是因为jQueryMobile要求你只在初始化“页面”后才进行自定义处理。在以前的jQuery版本中，它无法在其他函数中使用.live（）绑定器。但这也不是问题。即使我使用新的.on（）绑定器绑定处理程序“.live（）”方式......

$(document).on('pageinit','#oneExpensePage',function(event){
    $('#oneExpenseForm').on('submit',function(){
        submitExpense();//This function takes care of everything I want
    })
})

...页面重新加载（即表单提交）仍然存在。

Answer 1

在提交时将操作留空action=""和prevent the event's default action：

<script>
$(function() {
    $('#oneExpenseForm').on('submit',function(e){
        e.preventDefault();
        submitExpense();
    });
});
</script>

在jQuery Mobile表单验证中使用表单提交处理程序，但阻止发送

1 个答案: