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

How can i validate information using jquery validation plugin when using XEDITABLE for edit-in-place?

This is my current non-validated x-editable field

这是我当前未经验证的x-editable字段

This is what i pretend

这就是我假装的

4 个解决方案

#1

I use valib.js instead of stone jquery validation

我使用valib.js而不是石头jquery验证

HTML:

HTML：

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

JS:

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

DEMO

#2

Based on answer above but an attempt to use jquery validation. From

基于上面的答案，但尝试使用jquery验证。从

HTML

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

Currently the use of jQuery Validation Plugin is not supported by X-editable.

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

jQuery Validation Plugin has two requirements that doesn't play well with most implementations of X-editable:

jQuery Validation Plugin有两个要求，与大多数X-editable实现不兼容：

1. It requires the validated element to be a child of a <form> element (source). In theory, we could have workaround this by nesting the x-editable fields inside a <form></form> element, but:
2. 它要求validated元素是
   元素（source）的子元素。理论上，我们可以通过将x-editable字段嵌套在 元素中来解决此问题，但是：
3. The validated elements must be form elements (<input>, <textarea>, <select>, etc...) (source)
4. 验证的元素必须是表单元素（，，等...）（源代码）

So basically, here are your options:

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

1. Use the HTML5 input types feature by setting the field attribute data-type='email' (see demo here) The output will be slightly different from what you expected it to be, according to your screenshot. Therefore you should probably use one of the following methods, which is:
2. 通过设置字段属性data-type ='email'来使用HTML5输入类型功能（请参阅此处的演示）根据您的屏幕截图，输出将与您预期的略有不同。因此，您应该使用以下方法之一，即：
3. Use another external validation library, like @dm4web suggested.
4. 使用另一个外部验证库，如@ dm4web建议。
5. Ultimately you can also create your own validation function if your prefer, see demo here
6. 最后，如果您愿意，也可以创建自己的验证功能，请参阅此处的演示

#4

It support have data-type='email' as well.

它支持data-type ='email'。

HTML5 input types. Following types are supported:

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

password, email, url, tel, number, range, time

密码，电子邮件，网址，电话，号码，范围，时间

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