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

【问题标题】：How can I use x-editable and jquery validation plugin如何使用 x-editable 和 jquery 验证插件
【发布时间】：2014-06-20 22:30:57
【问题描述】：

当使用XEDITABLE 进行就地编辑时，如何使用jquery validation 插件验证信息？

这是我当前未经验证的 x 可编辑字段

这是我假装的

【问题讨论】：

标签： javascript jquery validation x-editable

【解决方案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】：

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

jQuery Validation Plugin 有两个要求不能很好地与大多数 X-editable 实现配合使用：

它要求经过验证的元素是 <form> 元素 (source) 的子元素。理论上，我们可以通过将 x-editable 字段嵌套在 <form></form> 元素中来解决此问题，但是：
经过验证的元素必须是表单元素（<input>、<textarea>、<select> 等...）(source)

所以基本上，这里有你的选择：

通过设置字段属性data-type='email' (see demo here) 使用HTML5 input types feature 根据您的屏幕截图，输出将与您预期的略有不同。因此，您可能应该使用以下方法之一，即：
使用另一个外部验证库，如 @dm4web 建议的那样。
如果您愿意，最终您还可以创建自己的验证函数，see demo here

【讨论】：

【解决方案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';
       }   
});

【讨论】：

【解决方案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>

【讨论】：