2016-03-21 6 views
0

これは奇妙です。そこで、私はBackbone.jsとjQuery Mobileの両方を使用しているサイトでjQuery検証を実装しました。 1つのフォームでは、入力フィールドの下に赤いテキストが表示されるデフォルトの設定とほとんど同じです(テキストがフィールド内にないように配置を変更する必要がありました)。JQuery Validatorはすべてのフォームフィールドでツールチップをオフにします

何らかの理由で別のページにエラーメッセージが表示されません。彼らはツールチップのように見える。

ここでは、検証ツールを使用する方法について多くの記事を見てきましたが、これは私の望むものではありません。私はただの普通の赤いテキストがほしいだけです。

誰かがこれを見ることができたら、私はそれを感謝します。ここでは、登録ページに移動し、ちょうどあなたが、私は物事が見てみたい方法について説明します何に入力せずに提出する]をクリックするとそのページ上の

http://demo.velexo.com/m2/

問題を見ることができるデモサイトです。その後、戻ってログインページに移動して、これらの資格情報(それはデモサイトです心配しないでください)

のユーザー名でログインします。public

パスワード:このページの99382lVAB8

、保険情報をクリックして、 [送信]をクリックします。最初の入力フィールドにツールチップが表示されます。


[OK]を...(私は右次回にそれをやる)、申し訳ありませんみんな、私はそれが実際の例を持っているのがベストだろうと思ったが、あなたは正しいです。ここに関連するコードされています、私のバックボーンルータを設定する関数は、私はこれを入れて、その関数の最後で、

まずあり:

jQuery.validator.setDefaults({ 
    errorPlacement: function(error, element) { 
     error.appendTo(element.parent().parent().after()); 
    } 
}); 

あなたがクリックするまで、次に標準のバックボーンルーティングが引き継ぎ登録ページリンク。ここに関連するものだけを表示する必要がありますregisterAppページのストリップダウンバージョンです:

var registerApp = function() { 
    var app = {}; 

    app.Register = Backbone.Model.extend({ 
     url: api_url + '/m2/api/register', 
    }); 

    app.RegisterMainView = Backbone.View.extend({ 
     template: _.template($('#register-main-template').html()), 
     render: function() { 
      this.$el.html(this.template(this.model.toJSON())); 
      return this; 
     } 
    }); 

    app.AppView = Backbone.View.extend({ 
     el: '#registerapp', 
     initialize: function() { 
      var register = new app.Register(regSteps); 
      var view = new app.RegisterMainView({model:register}); 

      $('#main-content').append(view.render().el); 
      $('#main-content').trigger('create'); 
      //$('#insurance-form').validate(); 

      jQuery.validator.setDefaults({ 
       errorPlacement: function(error, element) { 
        error.appendTo(element.parent()); 
       } 
      }); 


      $('#insurance-form').validate({ 
       rules: { 
        policy_provider: { required: true }, 
        policy_number: { required: true }, 
        start_date: { required: true }, 
        end_date: { required: true } 
       } 
      }); 

     }, 
     events: { 
      'submit': 'onFormSubmit', 
     }, 
     onFormSubmit: function(e) { 
      e.preventDefault(); 
      console.log('submit form'); 
     } 

    }); 

    app.appView = new app.AppView(); 
} 

は最後に、これらが使用されているテンプレートです。

<script type="text/template" id="register"> 
    <div id="registerapp"> 
     <div data-role="header"> 
      <h2 id="logo">&nbsp;</h2> 
     </div> 
     <div class="ui-content" id="main-content"> 
     </div> 
     <div data-role="footer" class="footerapp"> 
     </div> 
    </div> 
</script> 

<script type="text/template" id="register-main-template"> 
    <form action='/m2/api/register/' method='post' id='register-main' class="ui-mobile"> 
     <div class="ui-body ui-body-a ui-corner-all col"> 
      <div> 
       <div data-role="collapsibleset" id="registration-steps"> 
        <div data-role="collapsible" id="insurance"> 
         <h3><span>Insurance Information</span><img src="images/<%- ins_icon %>"/></h3> 
         <form action="#" id="payment-forms" id="insurance-form"> 
          <span>We just need some basic information about your insurance</span> 
          <div><input name="policy_provider" id="policy_provider" type="text" placeholder="Policy Provider" required/></div> 
          <div><input name="policy_number" id="policy_number" type="text" placeholder="Policy Number" required/></div> 
          <div><input name="start_date" type="text" placeholder="Start Date" required/></div> 
          <div><input name="end_date" type="text" placeholder="End Date" required/></div> 
          <button name="submit_insurance" id="submit_insurance" type="submit" class="ui-btn">Submit Insurance Info</button> 
         </form> 
        </div> 
       </div> 
      </div> 
     </div> 
    </form> 
</script> 

そして、これを洗浄する工程でここに投稿するために私はいくつかかなり愚かなことをやっていると思う。フォーム内にフォームがあるように、それが悪い考えであることは間違いありません。

+0

私たちにコードを表示してください...あなたのライブデモサイトを掘り下げるとは思わないでください。さらに、この質問はあなたがデモを取ってしまえば、他の人にとって役に立たなくなるでしょう。 – Sparky

+0

**ツールヒントはjQuery Validateから来ていません** ...これはブラウザのHTML5検証に組み込まれています。言い換えると、jQuery Validateプラグインをインストール、初期化、または適切にセットアップしていない...関連するコードを見ずに、どこに間違っていたかを知る方法がありません。それ以外の場合は、このフォームの関連するHTMLマークアップと '.validate()'メソッドの呼び出しを表示します。 – Sparky

+0

すべての良い点は、私は行って元の投稿を更新したのでうまくいけば、あなたと他の人に便利です。 –

答えて

1

ツールチップがjQueryから来ていないことを確認します。これは、ブラウザのHTML5検証に組み込まれています。つまり、jQuery Validateプラグインを適切に初期化していないため、マークアップにHTML5検証属性requiredが含まれているため、これに置き換えられます。しかし

、重要な問題...

次の2つの異なるidの属性があります(あなたが.validate()メソッド内のすべての検証ルールを宣言しているので、あなたが任意のHTML5の検証属性を使用する必要はありませんNOTE。)同じ<form>の要素に...

<form action="#" id="payment-forms" id="insurance-form"> 

行動は予測できません、しかし、それは第二id属性は、あなたが.validate()に添付たのと同じidである、初期化メソッドを無視される可能性があります。

$('#insurance-form').validate({ .... 
+0

そして、いつものように答えは...私は老人化するつもりです。ありがとうございます。 –

関連する問題