当试图阻止提交时，jquery移动表单提交重置表单

Question

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

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

<form id="microForm">

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

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

Answer 1

这应该工作，看看我为你做的一个例子： 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之间切换，看看它是如何工作的。

Answer 2

我对@ 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>