0

폼을 제출할 때 모든 필드가 채워지는지 확인하려면 부트 스트랩 검사기를 사용하고 있습니다. 하지만 내 유효 검사기가 예상대로 작동하지 않습니다! http://jsfiddle.net/3v3011e0/폼 유효성 검사가 부트 스트랩 유효성 검사기와 작동하지 않습니다.

당신이 그것으로 재생하고 비어있는 모든 필드와 양식을 제출하고에 비어 있지 그들 중 하나를 변경하는 경우는, 모든 필드가 녹색으로 : 여기

는 JSFiddle입니다. 이것은 일어나서는 안됩니다. 제대로 작동하는 필드는 초록색이어야합니다. 이 그림에서 알 수 있듯이 사용자 이름과 비밀번호는 비어 있지만 녹색으로 표시됩니다. 또한 아이콘에는 사용자 이름 만 표시됩니다. 이 문제를 어떻게 해결할 수 있습니까?

enter image description here

는 HTML

<form action="#" method="POST" id="myForm"> 
    <div class="form-group"> 

    <input id="userField" type="text" name="username" placeholder="Enter user name" class="form-control" /> 

    <input id="password" type="password" name="password" placeholder="Choose a password" class="form-control" /> 

    <select id="myPicker" name="num" class="selectpicker form-control"> 
     <option value="" selected="selected">Select number</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select> 
    </div> 

    <div class="text-center"> 
    <button type="submit" class="btn btn-primary">submit</button> 
    </div> 
</form> 

자바 스크립트

$(document).ready(function() { 
    $('#myForm').bootstrapValidator({ 
    feedbackIcons: { 
     valid: 'glyphicon glyphicon-ok', 
     invalid: 'glyphicon glyphicon-remove', 
     validating: 'glyphicon glyphicon-refresh' 
    }, 
    fields: { 
     username: { 
     validators: { 
      notEmpty: { 
      message: 'The username is required and cannot be empty' 
      } 
     } 
     }, 
     password: { 
     validators: { 
      notEmpty: { 
      message: 'The password is required and cannot be empty' 
      } 
     } 
     }, 
     num: { 
     validators: { 
      notEmpty: { 
      message: 'Number is required and cannot be empty' 
      } 
     } 
     } 
    } 
    }); 
}); 

답변

0

나는이 오래된 질문 알아요하지만이 플러그인의 이전 버전과 함께 일하고, bootstrapValidator는이와 함께으로 테마, SmartAdmin을 사용하고있었습니다.

먼저이 플러그인에는 두 가지 버전이 있습니다. (최대 .5.2까지 무료 버전?)

formvalidation.io (유료 버전), bootstrapValidator

은 어쨌든 그들은 다른 및 설명서는 그래서 당신이 올바른 하나에 대한 문서를 사용하고 있는지 확인 다르다.

이 사용자의 문제는 HTML 태그가 잘못되었습니다. 각 필드는 플러그인의 기본 초기화를 사용할 때 ".form-group"클래스로 구분되어야합니다.

<div class="form-group"> 
    <input id="userField" type="text" name="username" placeholder="Enter user name" class="form-control" /> 
</div> 
<div class="form-group"> 
    <input id="password" type="password" name="password" placeholder="Choose a password" class="form-control" /> 
</div> 
<div class="form-group"> 
    <select id="myPicker" name="num" class="selectpicker form-control"> 
     <option value="" selected="selected">Select number</option> 
     <option value="1">1</option> 
     <option value="2">2</option> 
    </select> 
</div> 

http://jsfiddle.net/3v3011e0/7/

이 할 수없는 경우

는 복잡한 양식 예제의 초기화를 모방하려고합니다. http://bootstrapvalidator.votintsev.ru/examples/complex-form/

관련 문제