如何使用x-editable和jquery验证插件

Question

如何在使用jquery validation进行编辑时使用XEDITABLE插件验证信息？

这是我当前未经验证的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. 它要求经过验证的元素是<form>元素（source）的子元素。 从理论上讲，我们可以通过将x-editable字段嵌套在<form></form>元素中来解决此问题，但：
2. 经过验证的元素必须为表单元素（<input>，<textarea>，<select>等...）（source）

基本上，这是您的选择：

1. 通过设置字段属性data-type='email'（HTML5 input types feature）来使用see demo here 根据您的截图，输出将与您预期的略有不同。因此，您应该使用以下方法之一，即：
2. 使用其他外部验证库，例如@ dm4web建议。
3. 最后，如果您愿意，也可以创建自己的验证功能see demo here

Answer 3

基于上面的答案，但尝试使用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';
       }   
});

Answer 4

支持数据类型=＆＃39;电子邮件＆＃39;同样。

HTML5输入类型。支持以下类型：

密码， 电子邮件， URL， 电话， 数， 范围， 时间

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