欧芹2.0.3不能与boostrap 3一起使用 [英] parsley 2.0.3 not working with boostrap 3

问题描述

我正在尝试在HTML页面上使用parsely.js来验证输入框.目前，这个html页面包含一个输入框和一个提交按钮.该结构是使用引导程序3创建的，并且此页面不包含 Form 标记.

i am trying to use parsely.js on my html page to validate input box. currently this html page contains one input box and one submit button. the structure is created using bootstrap 3 and this page does not contain Form tag.

<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

i am calling parsley.js like

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要求的消息请输入您的姓名"也无法正常工作.

on click of Submit button. it returns true/false correctly and create span tag also. but error classes are not applied. even data-parsley-required-message'Please insert your name' is not working.

当我放入alert($(el))或alert(el)时，它会给出[object Object].我认为el应该是我调用欧芹函数的输入对象.但我无法获取el.attr('id')或任何其他属性.它返回未定义.我也尝试过

when i put alert($(el)) or alert(el) it gives [object Object]. i think el should be the input object on which i am calling parsley function. but i am not able to get el.attr('id') or any other attribute. it returns undefined. i have also tried

//return el.closest('.form-group');//not working
//return el.$element.closest('.form-group)//not working
//return $(el).$element.closest('.form-group')//not working

我无法使用Form标记，因为我在sharepoint content edtior Web部件中使用此html结构.

I can not use Form tag as i am using this html structure in sharepoint content edtior web part.

推荐答案

首先要注意的事项:

1. Parsley允许您将其绑定到字段，因此，如果没有form元素( classHandler函数接收类型为ParsleyField的对象.使用此对象，您可以使用el.$element访问输入元素(例如:alert(el.$element.attr('id'));

   The classHandler function recieves an object of the type ParsleyField. With this object, you can access the input element with el.$element (for example: alert(el.$element.attr('id'));

   我对您的validateInput函数进行了以下更改:

   I have made the following changes to your validateInput function:

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

   With this code, the message is presented correctly, and the successClass and errorClass are appended to the div form-group.

   请参阅以下正在使用jsfiddle

   这篇关于欧芹2.0.3不能与boostrap 3一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！