简体   繁体   English

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

[英]How can I use x-editable and jquery validation plugin

How can i validate information using jquery validation plugin when using XEDITABLE for edit-in-place? 在使用XEDITABLE进行编辑时,如何使用jquery验证插件验证信息?

This is my current non-validated x-editable field 这是我当前未经验证的x-editable字段

在此输入图像描述

This is what i pretend 这就是我假装的

在此输入图像描述

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

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

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. 通过设置字段属性data-type='email'使用HTML5输入类型功能请参阅此处的演示 )根据您的屏幕截图,输出将与您预期的略有不同。 Therefore you should probably use one of the following methods, which is: 因此,您应该使用以下方法之一,即:
  2. Use another external validation library, like @dm4web suggested. 使用另一个外部验证库,如@ dm4web建议。
  3. Ultimately you can also create your own validation function if your prefer, see demo here 最后,如果您愿意,也可以创建自己的验证功能, 请参阅此处的演示

Based on answer above but an attempt to use jquery validation. 基于上面的答案,但尝试使用jquery验证。 From

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

It support have data-type='email' as well. 它支持data-type ='email'。

HTML5 input types. HTML5输入类型。 Following types are supported: 支持以下类型:

password, email, url, tel, number, range, time 密码,电子邮件,网址,电话,号码,范围,时间

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM