- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在我的 html 页面上使用 parsely.js 来验证输入框。目前这个html页面包含一个输入框和一个提交按钮。该结构是使用 bootstrap 3 创建的,该页面不包含 Form 标签。
<div role='form'>
<div class="row form-group">
<div class="col-xs-3">
<label title="fullname">Full Name</label>
</div>
<div class="col-xs-4">
<input type="text" class='form-control' id="name" name="fullName" data-parsley-required="true" data-parsley-required-message="Please insert your name"/>
</div>
</div>
<input type="submit" class= "btn btn-danger"/> </div>
我像这样调用parsley.js
function validateInput()
{
var handle = $("input[name='fullName']").parsley({
successClass: "has-success",
errorClass: "has-error",
classHandler: function (el) {
return $(el).closest('.form-group');//not working
},
errorsWrapper: "<span class='help-block'></span>",
errorTemplate: "<span></span>",
});
return handle.isValid();
}
单击“提交”按钮。它正确返回 true/false 并创建 span 标签。但不应用错误类别。甚至 data-parsley-required-message“请插入您的姓名”也不起作用。
当我输入alert($(el))或alert(el)时,它给出[object Object]。我认为 el 应该是我调用欧芹函数的输入对象。但我无法获取 el.attr('id') 或任何其他属性。它返回未定义。我也尝试过
//return el.closest('.form-group');//not working
//return el.$element.closest('.form-group)//not working
//return $(el).$element.closest('.form-group')//not working
我无法使用表单标签,因为我在 sharepoint 内容编辑器 Web 部件中使用此 html 结构。
最佳答案
首先有几件事:
Parsley 允许您将其绑定(bind)到字段,因此如果没有表单元素 ( see docs ),您不会遇到问题;
classHandler
函数接收 ParsleyField
类型的对象。通过此对象,您可以使用 el.$element
访问输入元素(例如:alert(el.$element.attr('id'));
我对您的 validateInput
函数进行了以下更改:
<script type="text/javascript">
function validateInput() {
$("input[name='fullName']").parsley({
successClass: "has-success",
errorClass: "has-error",
classHandler: function (el) {
return el.$element.closest('.form-group'); //working
},
errorsWrapper: "<span class='help-block'></span>",
errorTemplate: "<span></span>",
});
// Returns true / false if the field has been validated. Does not affect UI.
//$("input[name='fullName']").parsley().isValid());
// validate field and affects UI
$("input[name='fullName']").parsley().validate();
}
</script>
使用此代码,可以正确显示消息,并将 successClass 和 errorClass 附加到 div form-group
中。
查看以下working jsfiddle
关于javascript - 欧芹 2.0.3 不适用于 bootstrap 3,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24974417/
我刚刚完成了我用欧芹制作的表格。我第一次使用欧芹,所以我还不是100%熟悉它。 因此,我想在表单顶部显示无效输入字段中发生的所有错误。但我真的不知道我到底该怎么做。我已经尝试过使用 .clone()
尝试在全角字符欧芹的电子邮件验证检查上书写:- JS代码:- window.Parsley.addValidator('validateFullWidthCharacters', { valida
我正在尝试在 Parsley 中设置自定义验证,以至少填写两个字段之一。 我从欧芹文档的这个例子开始:http://parsleyjs.org/doc/examples/events.html 但这似
我正在使用 python 2.7 和 django 1.10。 我也在使用django-parsley用于客户端验证。 在每个页面上,parsley.min.js 文件中都有以下错误: Uncaugh
我打算在 as3 中启动一个新项目,我希望在项目中进行依赖注入(inject)。我发现 parsley 和 Robotlegs 是在 AS3 中实现 DI 的两个流行框架。这两个中哪个是最好的? 我的
我正在开发一个 MVC 5 项目,我遇到了 parsley.js 并发现它非常有趣。我开始使用它,但很快我就知道我们无法将它与 MVC 中使用的数据注释集成。 区别 id=s 是欧芹期望“data-r
这看起来像是一个衍生问题,但最初的问题从未得到答案,我希望我永远不会因此而失分。所以我使用 parsleyjs 进行验证,顺便说一句,验证很棒,但我不喜欢默认显示错误的方式。 通常,它会创建一个带有几
我正在构建一个表单,我想在其中使用 Twitter Bootstrap Popover 显示错误(如下所示: https://rentmatic.com/ ,尝试在表单为空的情况下提交)。 这要求我每
感谢您的帮助。 我正在尝试使用 Parsley 进行表单验证。我的表单有一个提交按钮和一些其他按钮,用于向表单动态添加输入。但是当我按下这些其他按钮时,就会执行表单验证。但我没有提交任何表格。 当我按
我有一个表单,我正在使用欧芹进行验证: HTML JQUERY $(document).read
我正在尝试在我的 html 页面上使用 parsely.js 来验证输入框。目前这个html页面包含一个输入框和一个提交按钮。该结构是使用 bootstrap 3 创建的,该页面不包含 Form 标签
我是一名优秀的程序员,十分优秀!