0

我正在尝试在我的 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();
    }

点击提交按钮。它正确返回真/假并创建跨度标签。但不应用错误类。甚至 data-parsley-required-message '请输入你的名字' 不起作用。

当我输入警报（$（el））或警报（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

我无法使用表单标记，因为我在共享点内容编辑器 Web 部件中使用了这个 html 结构。

4

1 回答 1

4

先说几点：

  1. Parsley 允许您将其绑定到一个字段，因此没有表单元素您不会有问题（请参阅文档）；

  2. 该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。

请参阅以下工作 jsfiddle

于 2014-07-26T19:33:57.407 回答