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

Posted 2023-05-08

【中文标题】如何使用 x-editable 和 jquery 验证插件

【英文标题】：How can I use x-editable and jquery validation plugin

【发布时间】：2014-06-20 22:30:57

【问题描述】：

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

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

这是我假装的

【参考方案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">[e-mail]</a>
<script>
 $(function()
  $('#email').editable(
    url: '/post',
    title: 'Enter email'
    );
  );
</script>