如何使用x-editable和jquery驗證插件

Question

在使用XEDITABLE進行編輯時，如何使用jquery驗證插件驗證信息？

這是我當前未經驗證的x-editable字段

這就是我假裝的

Answer 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

Answer 2

目前，X-editable不支持使用jQuery Validation Plugin。

jQuery Validation Plugin有兩個要求，與大多數X-editable實現不兼容：

1. 它要求validated元素是<form>元素（ source ）的子元素。 理論上，我們可以通過將x-editable字段嵌套在<form></form>元素中來解決此問題， 但是 ：
2. 驗證的元素必須是表單元素（ <input> ， <textarea> ， <select>等...）（ 源代碼 ）

所以基本上，這是你的選擇：

1. 通過設置字段屬性data-type='email'使用HTML5輸入類型功能 （ 請參閱此處的演示 ）根據您的屏幕截圖，輸出將與您預期的略有不同。 因此，您應該使用以下方法之一，即：
2. 使用另一個外部驗證庫，如@ dm4web建議。
3. 最后，如果您願意，也可以創建自己的驗證功能， 請參閱此處的演示

Answer 3

基於上面的答案，但嘗試使用jquery驗證。 從

HTML

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

腳本

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

Answer 4

它支持data-type ='email'。

HTML5輸入類型。 支持以下類型：

密碼，電子郵件，網址，電話，號碼，范圍，時間

<a href="#" id="email" data-type="email" data-
pk="1">admin@example.com</a>
<script>
 $(function(){
  $('#email').editable({
    url: '/post',
    title: 'Enter email'
    });
  });
</script>