jquery mobile form submit在尝试阻止提交时重置表单答案

【问题标题】：jquery mobile form submit resets form when trying to prevent submissionjquery mobile form submit在尝试阻止提交时重置表单
【发布时间】：2013-02-07 11:14:13
【问题描述】：

所以我有一个表单，如果某些字段是无效的，它不会提交表单，它会吐出一个alert() 告诉他们修复它。我面临的问题是它重置了表单并且用户添加的所有数据都消失了。由于我的表单太大，我将向您展示我的 jQuery 函数：

$('#microForm').live('submit', function(){
                if ($('#barcode').val() != '') {
                    insertForm();
                } else {
                    alert('Insert Barcode');
                    return false;
                }
});

<form id="microForm">

我正在一个带有 phonegap 的 Android 应用程序上尝试这个 - 将一个表单插入到本地数据库表（即 sqlite）。

任何帮助将不胜感激。谢谢。

【问题讨论】：

我有一段时间没有使用 jQuery mobile，所以我不确定：问题是“返回 false”会强制页面重新加载吗？您可以尝试删除它吗？（只是一个想法）
@Ciack404 使用 e.preventDefault 和 return false 仍然会使页面重新加载
@axrwkr 是的，我都试过了
您应该使用 JQM 弹出窗口或 simpleDialog 而不是警报。我不知道这是否能解决问题，但这是显示消息的正确方式。

标签： android jquery forms cordova jquery-mobile

【解决方案1】：

我对@Gajotres jsFiddle 做了一个小调整：

http://jsfiddle.net/bGdM6/1/

您可以检查提交按钮单击/点击事件，而不是在表单上使用提交，如果您需要的所有值都在那里，然后提交表单

JS：

$('#submit-btn').on('click', function(event) {
    if ($('#barcode').val() != '') {
        alert('Submit');
        $('#microForm').submit(); // <-- submit the form
    } else {
        alert('Insert Barcode');
        event.preventDefault();
        return false;
    }
});

HTML

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <form id="microForm">
            <input type="text" value="" id="barcode"/>
            <input type="submit" id="submit-btn" value="Submit"/>
        </form>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>

【讨论】：

真好！ e.preventDefault 和 return false 之间有区别吗？
@SNpn stackoverflow.com/questions/2017755/…
很抱歉备份了这个，但是当您删除“提交”事件时，您将无法通过按智能手机上的“开始”按钮提交表单。有替代方案吗？

【解决方案2】：

这应该可行，看看我为你做的一个例子：http://jsfiddle.net/Gajotres/bGdM6/

您应该使用 on 而不是 live：

$('#microForm').on('submit', function(event){
    if ($('#barcode').val() != '') {
        alert('Submit');
    } else {         
        alert('Insert Barcode');
        return false;
    }
});

在live和on之间切换，看看它是如何工作的。

【讨论】：