2012-03-08 14 views
1

jQueryMobileとPhoneGapでアプリケーションを構築しています。私は、ChromeとNexus S Androidの携帯電話でテストを行っている間にうまく動作するフォームを検証する方法を持っていますが、すべてのデバイスで動作するかどうかはわかりません。検証のためにjQueryMobileでフォーム送信ハンドラを使用しますが、送信はできません

これは状況です:

私はいくつかの簡単なフォームを持っています。ユーザーが入力するデータはローカルに格納されます。だから、POSTやGETリクエストは必要ありません(実際には、私はそれらをペストのように避けたい)。いくつかの入力とボタンを作成してボタンにクリックハンドラを追加するだけで、うまく動作するようにすることができます。

私は本当にHTML5フォームの検証用のものが好きです。そして、検証はフォーム上で送信イベントが発生したときにのみ行われます(ほとんど)。だから私は入力とボタンをフォーム要素の中に入れ、一つのボタンをサブミットボタンにし、フォーム上で実行されるサブミットイベントを待ち受けるようにしました。 もう1つのアプローチ(ここでは「削除」ボタンに示されています)は、送信プロセスを一切使用せずにボタンのクリックを単に聞くことです。結局のところ、ユーザーがアイテムを削除したい場合、フォームを検証する必要はありません(私の場合はとにかく)。

<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=''> 

しかし、それは(jQueryMobileでの作業時は本当に悪いと不要なものである)ページのリロードを引き起こしGETリクエストを、起動するブラウザを引き起こしました。

私が心配しているのは、特定のブラウザでエラーが発生する可能性があるということです。結局のところ、一部のブラウザでは、すべての提出イベントを発生しないようにする理由として... ...

action="javascript:void(0);" 

をこのaction属性が表示される場合があります。検証のために提出イベントが必要なので、それは悪いです。

私はここで不必要なリスクを取っていますか?または、フォームアクションがnull、voidなどに設定されている場合でも、すべてのブラウザが送信イベントを発生させますか?

もう一つ: 私は、もちろん、単にHTMLファイルに... ...

action="javascript:submitExpense();" 

を指定することができます。しかし、これは私が避けたいものです。なぜなら、Jsコードを難読化で保護しているからです。これは、関数の名前をaR3df()のような読めないコードに変更することです。特別なソフトウェアを使用します。私は、難読化された名前を調べて、HTMLを公開するたびにそれらを入力する必要はありません。

EDIT: 最初の回答が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 
    }) 
}) 

...ページのリロードをバインドするとき(すなわち、フォーム送信)持続します。

答えて

0

提出のaction=""prevent the event's default action空のままのアクション:

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

おかげstreetPCが、それはうまくいきませんでした。私はフォーム上のアクションを= ""に設定し、あなたが示唆したようにスクリプトを作成しましたが、ページはまだURLのフォームフィールドでリロードされます。 – Wytze

+0

別のイベントハンドラの中でハンドラをバインドするのと何か関係があるかどうかを確認しましたが、問題ではありませんでした。この状況では、e.preventDefault()はデフォルトを防ぎません。 – Wytze

+0

pageinitではなく、上で編集した '$(function(){...}); 'を使ってみてください。決して呼び出されないバインディングコードだと思います。 –

関連する問題