2

これは私のフォームです：

<div id="MyModal" class="m-modal-container">
  <div class="form-wrap">
    <form id="form_reg" class="m-form reg-form" action="www.somedomain.com/subPage">
      <div class="form-element email">
    <input type="email" class="text" name="email" id="email" value="" placeholder="Email Address" title="Email is required." maxlength="90" required>
      </div>
      <div class="form-element buttons">
        <button type="submit" class="button primary submit">Register</button>
      </div>
    </form>
  </div>
</div>

これは、送信を処理するための私のJSファイルからのものです

$("#MyModal #form_reg").submit(function(event){
    var initial_id = 0;

    $.ajax({
        url: '/dir/file.cfc',
        async: false,
        data: {
            method: 'myFunction', 
            emailAddress: $("#MyModal #form_reg").find('[name="email"]').val(), 
            email_id: 0
        },
        cache: false,
        type: 'get',
        dataType: 'json'
    })
    .success(function(response) { initial_id = response.jsid; }) 
    .error(function(jqXHR, textStatus, errorThrown) { })
    .complete(function(response) { 
        if (initial_id == 0) {
            return true;
        } else {
            event.preventDefault();
            $('#MyModal').dialog('close');
            return false;               
        }
    });
});

私の質問：

このフォームは、メイン ページの上にモーダルとして表示されます。ユーザーが入力し、送信をクリックすると、新しいページに移動します。HTML5 フォーム検証を使用して必須フィールドを示します。古いブラウザーとの互換性のために webShims/polyfill を使用します。

それはすべて正常に機能します。特定の状況で問題が発生します。フォームを「サブページ」(フォームのデフォルト アクション) に送信したくありません。代わりに、モーダルを表示したページにとどまり、モーダルフォームを単純に閉じたいと思います。(これは、電子メールがシステムに既に存在する場合に発生します。電子メールがシステムに既に存在するというメッセージを表示するセカンダリ フォーム ページにユーザーを移動させたくありません)。

$("#MyModal #form_reg").click(function(event){ 何とか何とか}); を使用する場合 - 次に、送信と非送信を制御できます。ただし、その後、HTML5 フォーム検証機能が失われます。$("#MyModal #form_reg").submit(function(event){ blah blah blah }); を使用する場合 フォームの検証は機能しますが、ページは送信され、イベントはコードによってキャプチャされません。

これまでに行ったすべての調査は、IE7 が .submit イベントでうまく機能しないことを示していますが、フォーム検証が機能するには .submit イベントが必要です。

この 3 つを連携させる方法はありますか? 私の問題を引き起こしているブラウザは IE7 だけです。.submit/form 検証は、FF、IE9、Opera、および Chrome で意図したとおりに機能します。

どんな提案でも大歓迎です。ありがとうございました。

4

3 に答える 3

0

クライアント側のフォーム検証のほとんどのクロスブラウザー ソリューションの 1 つは、HTML5 検証を動的に無効にし (たとえば、JS を使用して要素にnovalidate属性を追加することによりFORM)、すべてのブラウザーで同じカスタム JavaScript 検証コードパスを使用することです。

そのため、JS が無効になっている場合、 HTML5 検証は少なくとも最新のブラウザーで機能しますが、JS が有効になっている場合、JavaScript 検証はすべてのブラウザーで機能します。

于 2012-10-16T22:35:33.147 に答える
0

サブミット イベントは IE7 で動作するはずです。jQuery で正規化する必要があります。とても奇妙です。私は言います: webshim を削除してみて (テストのためだけに)、submit ハンドラーが呼び出されているかどうかを確認してください。機能する場合は、webshims のバグである可能性があります (これを報告してください)。それでも機能しない場合は、jQuery のバグである必要があります。

問題を回避するには、次の手順を実行できます。

  • 検証を削除します $("#MyModal #form_reg").prop('noValidate', true);
  • 送信またはボタンクリックにフックする
  • checkValidity + 検証メッセージの表示を使用して、ハンドラー内の有効性を確認します
于 2012-10-23T20:16:06.443 に答える
0

.preventDefault()デフォルトの送信アクションを停止するを使用してみてください

$("#MyModal #form_reg").submit(function(event){
    var initial_id = 0;

    event.preventDefault();

   // your code here
于 2012-10-16T22:15:12.553 に答える