3

質問: jqBootstrapValidation をバリデーターとして使用し続けながら、検証を高速化するにはどうすればよいですか?

問題: jqBootstrapValidation をバリデーターとして使用して小さなコンタクト フォームをセットアップしましたが、追加のフィールドを追加し始めると非常に遅くなり、フォーム フィールドに複数の文字を入力するとバリデーターに 1 秒以上かかります。返答する。

速度低下は、20 ～ 30 のフォーム フィールドで簡単に確認できます。

私は試しました：これまでのところ、 を使用して要素を非表示にするなど、多くのことを試しましたstyle="display: none;"が、速度に違いはないようです。

フォームを送信する前に部分的に処理することはできましたが、うまくいきませんでした。この状況にアプローチするためのより良い方法はありますか? JavaScript に比較的慣れていないために見逃している単純なものがあるのでしょうか?

私の現在のフォーム/js :フォームフィールドを追加するまではうまく機能します。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Title</title>
</head>
<body id="page-top" class="index">
    <form name="sentMessage" id="contactForm" novalidate>
        <div class="control-group">
            <label>Name</label>
            <input type="text" placeholder="Name" id="name" required data-validation-required-message="Please a name.">
            <p class="help-block text-danger"></p>
        </div>
        <div class="control-group">
            <label>Message</label>
            <textarea rows="3" placeholder="Message" id="message" required data-validation-required-message="Enter a message."></textarea>
            <p class="help-block text-danger"></p>
        </div>
        <br>
        <div id="success"></div>
        <div>
                <button type="submit">Click to send</button>
        </div>
    </form>

    <!-- jQuery -->
    <script src="js/jquery.js"></script>
    <!-- Contact Form Script -->
    <script src="js/jqBootstrapValidation.js"></script>
    <script>
    $(function() {
        $("#contactForm input,#contactForm textarea").jqBootstrapValidation();
    });
    </script>
</body>
</html>

使用されるバリデータ: http://ReactiveRaven.github.com/jqBootstrapValidation/

4

1 に答える 1

0

私はまだより良い答えを探していますが、その間に回避策を見つけました。

回避策は、送信時と特定のイベントが発生したときにのみフォームを検証することです。したがって、アクティブなバリデーターからすべてのスローダウンを取り除きます。

jqBootstrapValidation バリデーターは、次のいずれかのイベントが発生したときに検証を実行するように登録されていkeyup, focus, blur, click, keydown, keypress, changeました。簡単な修正は、トリガーしたくないイベントを削除し、重要なイベントのみを保持することです。

たとえば、431 行目から始まる jqBootstrapValidation.js ファイルでは、さまざまなイベントを確認できます。

  // =============================================================
  //                                             WATCH FOR CHANGES
  // =============================================================
  $this.bind(
    "submit.validation",
    function () {
      return $this.triggerHandler("change.validation", {submitting: true});
    }
  );
  $this.bind(
    [
      "keyup",
      "focus",
      "blur",
      "click",
      "keydown",
      "keypress",
      "change"
    ].join(".validation ") + ".validation",
    function (e, params) {

したがって、私の場合は、次のように「変更」イベントと「ぼかし」イベントのみを登録するように変更しました。

  // =============================================================
  //                                             WATCH FOR CHANGES
  // =============================================================
  $this.bind(
    "submit.validation",
    function () {
      return $this.triggerHandler("change.validation", {submitting: true});
    }
  );
  $this.bind(
    [
      "blur", //validate when a field looses focus
      "change" //Validate on form submit
    ].join(".validation ") + ".validation",
    function (e, params) {

これが意図したとおりに機能することを確認するには、さらにテストが必要になる場合があります。

この回答https://stackoverflow.com/a/1587543/1270000も、小さな最適化で追加のヘルプを提供したことに言及する価値があると思います。

于 2016-06-28T14:32:00.050 に答える