[英]How can I use x-editable and jquery validation plugin
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';
}
});
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实现不兼容:
<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>
元素中来解决此问题, 但是 : <input>
, <textarea>
, <select>
, etc...) ( source ) 验证的元素必须是表单元素( <input>
, <textarea>
, <select>
等...)( 源代码 ) So basically, here are your options: 所以基本上,这是你的选择:
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: 因此,您应该使用以下方法之一,即: 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.