JQuery Validator, tüm form alanlarındaki OFF işaretlerini döndürür

Question

Bu bir garip. Bu yüzden jQuery Doğrulaması'nı, hem Backbone.js hem de jQuery Mobile'ı kullanıyorum bir sitede uygulamıştım. Bir formda doğrulama, giriş alanlarının altında kırmızı metin gördüğünüz varsayılan değerlere benziyor (yerleştirmeyi değiştirmek zorunda kaldım, böylece metin alanın içinde değildi).

Bazı nedenlerle hata iletileri aynı şekilde görünmüyor. Bir araç ipucu gibi görünüyorlar.

Ben ancak o ne istediğimi değil, burada doğrulama kullanımı Araç İpuçlarını nasıl için birçok mesajları gördüm. Sadece standart düz kırmızı metinleri istiyorum.

Eğer birisi buna bir göz atabilirse bunu takdir ediyorum. Burada Kayıt sayfasına gitmek eğer o sayfadaki sorunu

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

görmek ve sadece ben şeyler bakmak istiyorum nasıl göreceksiniz şey doldurmadan teslim tıklayabilirsiniz bir tanıtım sitesi. sonra tekrar giriş sayfasına gidip (bir demo sitesi üzülmeyin) bu kimlik bilgileriyle

kullanıcı adı oturum: Kamu

şifre: Bu sayfadaki 99382lVAB8

, Sigorta Bilgi tıklayın ve ardından gönder'i tıklayın. İlk giriş alanında araç ipucunu gösterecektir.

---

Tamam .. üzgünüm beyler ben Canlı bir örnek olması için en iyi olacağını düşündüm ama (ben bunu doğru bir dahaki sefere yapacağız), haklısın.

Birincisi, ben bu işlevin sonunda benim omurga yönlendirici kurar bir işlev, orada konur

:

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

Sonra standart omurga yönlendirme size kadar üstlenir tıklayın burada alakalı koddur kayıt sayfası bağlantısı.

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(); 
} 

ve son olarak, bunlar kullanıldığında şablonları olan:

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

Ve bu temizlik sürecinde burada alakalı yalnızca ne göstermelidir registerApp sayfasının tam olmayan bir sürümüdür Buraya posta için geldiğimi fark ettim, bazı aptalca şeyler yapıyorum. Bir formda bir formun olması gibi, bu kesinlikle kötü bir fikir.

Answer 1

tooltipi tarayıcının dahili HTML5 doğrulama var ... jQuery Doğrulama gelen DEĞİLDİR. Başka bir deyişle, jQuery Validate eklentisini düzgün bir şekilde başlatmadınız, bu nedenle işaretlemeniz HTML5 doğrulama özniteliğini, required içerdiğinden, buna geri dönüş yapılacaktır. (NOT: .validate() yönteme içindeki tüm doğrulama kurallarını ilan etmesinden bu yana, herhangi bir HTML5 doğrulama özelliklerini kullanmasına gerek yoktur.) Ancak

, kritik sorunu ...

iki farklı id özelliklerine sahip aynı <form> elemanında ...

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

Davranış ancak sen .validate(), başlatma yöntemine eklediğiniz aynı id olan muhtemel ikinci id nitelik göz ardı edilecektir var, önceden kestirilemez olacaktır.

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