JQuery Validator отключает всплывающие подсказки по всем полям формы

Question

Это странно. Поэтому я реализовал проверку jQuery на сайте, где я использую как Backbone.js, так и jQuery Mobile. В одной форме валидация работает почти так же, как и по умолчанию, когда вы видите красный текст под полями ввода (мне пришлось изменить место размещения, чтобы текст не находился внутри поля).

На другой странице почему-то сообщения об ошибках не отображаются одинаково. Они выглядят как всплывающая подсказка.

Я видел здесь много сообщений о том, как использовать всплывающие подсказки для проверки, но это не то, что я хочу. Мне просто нужен стандартный простой текстовый текст.

Если кто-то может взглянуть на это, я был бы признателен. Вот демонстрационный сайт, где вы можете увидеть проблему

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

на этой странице, если вы перейдете на страницу регистрации и просто нажмите на кнопку отправить, не заполняя все, что вы увидите, как я хочу, чтобы посмотреть. затем вернитесь на страницу входа в систему и войти с этими учетными данными (не волнуйтесь, это демо-сайт)

имя: общественный

пароль: 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> 

И в процессе очистки этого для сообщения здесь я понимаю, что я делаю некоторые довольно немые вещи. например, иметь форму в форме, довольно уверен, что это плохая идея.

Answer 1

Всплывающая подсказка НЕ ​​исходит из jQuery Validate ... это встроенная проверка HTML5 в браузере. Другими словами, вы неправильно инициализировали плагин jQuery Validate, так как ваша разметка содержит атрибут проверки HTML5, required, он будет откидываться на это. (Примечание: так как вы объявили все правила проверки в рамках метода .validate(), вам не нужно использовать атрибуты любой проверки HTML5.)

Однако критический вопрос ...

У вас есть два различных id атрибуты на том же <form> элемент ...

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

поведение будет непредсказуемым, однако, скорее всего, второй id атрибут будет игнорироваться, что то же самое id вы прикреплены к .validate(), метод инициализации.

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