Как использовать плагин x-editable и jquery validation

Ответ 1

Я использую valib.js вместо проверки каменной jquery

HTML:

<p>X-editable Bootstrap popup</p>
<div style="margin: 150px">
    <a href="#" id="email">awesome</a>
</div>

JS:

$('#email').editable({
    type: 'text',
    url: '/post',    
    pk: 1,    
    placement: 'top',
    title: 'Enter email' ,
    validate:function(value){

       var v=valib.String.isEmailLike(value)         
       if(v==false) return 'Please insert valid mail';
    }   
});

DEMO

Ответ 2

На основании вышеприведенного ответа, но попытка использования проверки jquery. Из

HTML

<input type="email" name="email" id="email" required>

SCRIPT

$('#email').editable({
    type: 'text',
    url: '/post',    
    pk: 1,    
    placement: 'top',
    title: 'Enter email' ,
    validate: function(value){
       var flag = $("#email-input").validate();
       if (!flag) {
          return 'Please insert valid mail';
       }   
});

Ответ 3

В настоящее время использование плагина проверки jQuery не поддерживается X-editable.

Плагин проверки jQuery имеет два требования, которые не очень хорошо работают с большинством реализаций X-editable:

• Требуется, чтобы проверенный элемент был дочерним элементом <form> (source). Теоретически мы могли бы решить эту проблему, вставив x-редактируемые поля внутри элемента <form></form>, , но:
• Подтвержденными элементами должны быть элементы формы (<input>, <textarea>, <select> и т.д.) (source)

Итак, в основном, вот ваши варианты:

• Используйте функцию типов входных данных HTML5, установив атрибут поля data-type='email' (см. демо здесь) Результат будет немного отличаться от того, что вы ожидали от него, в соответствии с вашим снимком экрана. Поэтому вам следует, вероятно, использовать один из следующих способов:
• Используйте другую внешнюю библиотеку проверки, например @dm4web.
• В конечном итоге вы также можете создать свою собственную функцию проверки, если вы предпочитаете, посмотреть демо здесь