Javascript 欧芹2.0.3不适用于boostrap 3

我试图在我的html页面上使用parsely.js来验证输入框。当前，此html页面包含一个输入框和一个提交按钮。该结构是使用bootstrap 3创建的，该页面不包含表单标记

<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>

我无法使用表单标记，因为我正在sharepoint content eDior web部件中使用此html结构。

首先要做几件事：

Parsley允许您将其绑定到字段，因此如果没有表单元素（），就不会有问题

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>

函数validateInput（）{
$（“输入[name='fullName']）。欧芹({
成功类：“拥有成功”，
errorClass:“有错误”，
类处理程序：函数（el）{
返回el.$element.closest（'.form group'）；//工作
},
errorsWrapper:“”，
错误模板：“”，
});
//如果字段已验证，则返回true/false。不影响UI。
//$（“输入[name='fullName']）。欧芹（）.isValid（））；
//验证字段并影响用户界面
$（“输入[name='fullName']）。欧芹（）.validate（）；
}

使用此代码，消息将正确显示，successClass和errorClass将附加到div

表单组

先看以下几点：

Parsley允许您将其绑定到字段，因此如果没有表单元素（），就不会有问题

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>

函数validateInput（）{
$（“输入[name='fullName']）。欧芹({
成功类：“拥有成功”，
errorClass:“有错误”，
类处理程序：函数（el）{
返回el.$element.closest（'.form group'）；//工作
},
errorsWrapper:“”，
错误模板：“”，
});
//如果字段已验证，则返回true/false。不影响UI。
//$（“输入[name='fullName']）。欧芹（）.isValid（））；
//验证字段并影响用户界面
$（“输入[name='fullName']）。欧芹（）.validate（）；
}

使用此代码，消息将正确显示，successClass和errorClass将附加到div

表单组

---

请参见下面的

这很好，对我来说，一旦用户纠正错误，如何删除“帮助块”类。我知道欧芹将删除文本，但周围的div有一些填充，在更正后仍然可见。。。有什么建议吗？这很好，对我来说很有用，一旦用户纠正错误，如何删除类“帮助块”。我知道欧芹将删除文本，但周围的div有一些填充，在更正后仍然可见。。。有什么建议吗？

<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>