7

ウェブサイトに zurb ファンデーションを使用しています。それはそれ自身の検証を持っています。これはドキュメントへのリンクです。

次のコードを使用して、フォーム データを検証して送信しています。

$('#myForm').on('valid', function (g) {
g.preventDefault();

//ajax call to insert the data

});

私の問題は、を使用してこのフォームのデフォルトの送信を防ぐことができないことですpreventDefault()。

それを行う方法はありますか？

これをやってみました。

 $('#myForm').on('valid submit', function (g) {
    g.preventDefault();

    //ajax call to insert the data

    });

これにより、デフォルトの送信が妨げられますが、データが 2 回挿入されます。

4

5 に答える 5

12

別の回答に関する私のコメントで述べたように：

「有効」と「無効」はどちらも「送信」によってトリガーされるため、これは「無効」イベントによる AJAX の実行を停止しません。その結果、上記の関数は「submit」によって呼び出され、フォームが無効であっても AJAX 呼び出しが行われます。

少し変更するだけで、そのコードは機能します。

$("#myForm").on("valid invalid submit", function(g){
  g.stopPropagation();
  g.preventDefault();
  if (g.type === "valid"){
    // AJAX call
  }
});

これは、Abide 検証イベントを回避するハックな方法ですが、ライブラリがこのシナリオをより適切に処理できるようになるまでは、うまくいくでしょう。

- アップデート -

元の質問は Foundation 4 に適用されました。Foundation 5+ は、このシナリオをより適切に処理しているようです。

「submit イベントを自分で処理するには、form タグ内 でdata-abideの代わりにdata- abide="ajax"を使用してください。」

<form data-abide="ajax">
  <div class="name-field">
    <label>Your name <small>required</small>
      <input type="text" name="users_name" required pattern="[a-zA-Z]+">
    </label>
    <small class="error">Name is required and must be a string.</small>
  </div>
  <button type="submit">Submit</button>
</form>

$('input[name="users_name"]').on('valid', function() {
  // Handle the submission of the form
});

私は v4 以降 Abide を使用していないため、この更新を認識していませんでした。

于 2013-08-26T15:05:39.653 に答える
3

g.stopPropagation() を g.preventDefault() と一緒に使用できます。あなたの問題を解決するのに役立つかもしれません。

$('#myForm').on('valid submit', function (g) {
    g.stopPropagation();
    g.preventDefault();

    //ajax call to insert the data

});
于 2013-08-10T09:59:18.457 に答える
2

私はこのアプローチがよりきれいだと思います：

$('#myForm').on({
    'submit': function(){
        // will prevent browser-submitting the form in any any case:
        return false;
    },
    'valid': function(){
        // bind to abide's event and only care about submitting the stuff AJAX'ly
        $(this).ajaxSubmit({
            // ...
        });
    }
});
于 2013-12-16T12:32:38.373 に答える
1

foundation.abide.js ファイルを開く

検証メソッド/関数に移動します

次に、その最後の行で、「return true;」を変更します。「falseを返す」

于 2013-08-20T20:49:53.983 に答える
1

Foundation 5 では、ajax 呼び出しで data-abide を使用するときにこれを試してください。 preventDefault(); について心配する必要はありません。、以下のように data-abide="ajax" を使用するだけです

HTML

<form data-abide="ajax" id="myform">
  <div class="name-field">
    <label>Your name <small>required</small>
      <input type="text" name="users_name" required pattern="[a-zA-Z]+">
    </label>
    <small class="error">Name is required and must be a string.</small>
  </div>
  <button type="submit">Submit</button>
</form>

ジャバスクリプト

$('#myForm')
  .on('invalid.fndtn.abide', function () {
    var invalid_fields = $(this).find('[data-invalid]');
    console.log(invalid_fields);
  })
  .on('valid.fndtn.abide', function () {
    console.log('valid!');
  });

シンプルで簡単なリファレンス - http://foundation.zurb.com/docs/components/abide.html

于 2014-09-26T12:04:43.473 に答える