jQuery мобильная форма проверки, смешанная с сообщениями по умолчанию

Question

Я использую jquery.validate.js для управления проверками в моих формах. В моей форме у меня есть эта строка:

<input type="email" name="email" id="email" value="" /> 

В этой линии у меня есть [type="email"]. Поэтому, когда я пытаюсь поместить неправильное сообщение электронной почты в это поле, появляется сообщение проверки по умолчанию (всплывающее окно). Все сообщения других пользователей показывают путь jquery.validate.js.

Как это исправить? Что я делаю неправильно?

Answer 1

Изменить type=emailtype=text. Представление даже не срабатывает, потому что браузер предотвращает его из-за требования type=email.

Answer 2

Ваш код:

<input type="email" name="email" id="email" value="" /> 

Он работает в настольном браузере: http://jsfiddle.net/WhH8a/. «Работая», я вижу, что все сообщения, включая сообщение «Формат электронной почты», должным образом поступают из плагина Validation.

Плагин jQuery Validate динамически вставляет novalidate="novalidate" в элемент <form>, который должен отключить проверку формы HTML 5. Однако, возможно, есть причина, почему это не работает в вашем браузере для мобильных устройств.

Поскольку плагин Validate отключает проверку HTML 5, и вы хотите использовать плагин в пользу проверки HTML 5, вы можете также удалить его из разметки ...

... type="email" изменить к type="text" ,

Если вы хотите использовать правило email, сделайте это следующим образом.

HTML:

<input type="text" name="email" id="email" value="" /> 

JQuery:

$(document).ready(function() { 

    $('#myform').validate({ // initialize the plugin 
     // other options, 
     rules: { 
      email: { 
       required: true, 
       email: true 
      }, 
      // other rules 
     } 
    }); 

}); 

Рабочая Демо: http://jsfiddle.net/TxN48/

---

Кроме того, эти два правила могут быть определены инлайн в class атрибута:

HTML:

<input type="text" name="email" id="email" class="required email" value="" /> 

JQuery:

$(document).ready(function() { 

    $('#myform').validate({ // initialize the plugin 
     // other rules & options 
    }); 

}); 

Рабочая Демо: http://jsfiddle.net/TxN48/1/

Answer 3

Вы можете отключить проверку браузером новых полей формы HTML5 (включая type = email), добавив атрибут «novalidate» в тег формы.

например

<form method="post" action="" novalidate>...</form>