파슬리 2.0.3은 부스트랩과 함께 작동하지 않습니다. 3

Question

입력 상자의 유효성을 검사하기 위해 HTML 페이지에서 parsely.js를 사용하려고합니다. 현재이 HTML 페이지에는 하나의 입력 상자와 하나의 제출 버튼이 있습니다. 구조는 부트 스트랩 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> 

내가 버튼을 제출의 클릭에

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(); 
    } 

같은 parsley.js를 호출하고 있습니다. true/false를 올바르게 반환하고 span 태그도 만듭니다. 그러나 오류 클래스는 적용되지 않습니다. 심지어 데이터 - 파슬리 - 필수 - 메시지 '당신의 이름을 삽입하십시오'가 작동하지 않습니다.

경고 ($ (el)) 또는 경고 (el)를 입력하면 [object Object]가 표시됩니다. 필자가 파슬리 함수를 호출하는 입력 개체가되어야한다고 생각합니다. 하지만 el.attr ('id') 또는 다른 속성을 가져올 수 없습니다. undefined가 반환됩니다. 나는 또한 시도했다

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

나는 셰어 포인트 컨텐트 edtior 웹 파트에서이 html 구조를 사용하고 있기 때문에 Form 태그를 사용할 수 없다. 첫째

Answer 1

몇 가지 :

1. 파슬리는 폼 요소 (see docs)없이 문제가되지 않도록 당신은 필드에 바인딩 할 수 있습니다;

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에 추가됩니다.

다음을 참조하십시오. working jsfiddle