부트 스트랩 검사기를 사용하여 동일한 행의 필드를 개별적으로 검사 함

Question

내 프로젝트에 bootstrap validator을 사용하려고 생각했지만 방금 더미 html 페이지로 시도했습니다. 내 페이지에는 동일한 행에 두 개의 입력 필드가 들어있는 div이 있습니다. 이것은 내 양식

<form class="form-horizontal registerForm form1"> 
    <div class="form-group"> 
     <label class="col-sm-2 control-label">Account</label> 

     <div class="col-sm-4"> 
      <input type="text" class="form-control" name="username" placeholder="Username" /> 
     </div> 

     <div class="col-sm-4"> 
      <input type="text" class="form-control" name="email" placeholder="Email address" /> 
     </div> 
    </div> 
</form> 

입니다 내가 부트 스트랩에서 검증을 적용하면 그들이 어떻게 작동하는지

This는 하나의 form-group 클래스에 있기 때문에, 그것은 함께 두 필드를 확인합니다.

별도로 유효성 검사를 수행 할 수있는 방법이 있습니까?

Answer 1

html로 행을 선언하고 (예 : <div class="row"></div>) 행 내에 동일한 행의 양식 요소를 넣어야합니다. 그런 다음 유효성 검사 코드 내에서 row "옵션"(doc이 호출 함)을 사용해야합니다. 부트 스트랩 검사기의 버전 0.6.2에서 the complex form example의 샘플 코드를 붙여 넣습니다. (이 예제의 "선언적"버전은 제공되지 않습니다. "프로그래밍 방식"버전입니다.)

<style type="text/css"> 
/* Adjust feedback icon position */ 
#movieForm .form-control-feedback { 
    right: 15px; 
} 
#movieForm .selectContainer .form-control-feedback { 
    right: 25px; 
} 
</style> 

<form id="movieForm" method="post"> 
    <div class="form-group"> 
     <div class="row"> 
      <div class="col-xs-8"> 
       <label class="control-label">Movie title</label> 
       <input type="text" class="form-control" name="title" /> 
      </div> 

      <div class="col-xs-4 selectContainer"> 
       <label class="control-label">Genre</label> 
       <select class="form-control" name="genre"> 
        <option value="">Choose a genre</option> 
        <option value="action">Action</option> 
        <option value="comedy">Comedy</option> 
        <option value="horror">Horror</option> 
        <option value="romance">Romance</option> 
       </select> 
      </div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="row"> 
      <div class="col-xs-4"> 
       <label class="control-label">Director</label> 
       <input type="text" class="form-control" name="director" /> 
      </div> 

      <div class="col-xs-4"> 
       <label class="control-label">Writer</label> 
       <input type="text" class="form-control" name="writer" /> 
      </div> 

      <div class="col-xs-4"> 
       <label class="control-label">Producer</label> 
       <input type="text" class="form-control" name="producer" /> 
      </div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <div class="row"> 
      <div class="col-xs-6"> 
       <label class="control-label">Website</label> 
       <input type="text" class="form-control" name="website" /> 
      </div> 

      <div class="col-xs-6"> 
       <label class="control-label">Youtube trailer</label> 
       <input type="text" class="form-control" name="trailer" /> 
      </div> 
     </div> 
    </div> 

    <div class="form-group"> 
     <label class="control-label">Review</label> 
     <textarea class="form-control" name="review" rows="8"></textarea> 
    </div> 

    <div class="form-group"> 
     <label class="control-label">Rating</label> 
     <div> 
      <label class="radio-inline"> 
       <input type="radio" name="rating" value="terrible" /> Terrible 
      </label> 
      <label class="radio-inline"> 
       <input type="radio" name="rating" value="watchable" /> Watchable 
      </label> 
      <label class="radio-inline"> 
       <input type="radio" name="rating" value="best" /> Best ever 
      </label> 
     </div> 
    </div> 

    <button type="submit" class="btn btn-default">Validate</button> 
</form> 

<script> 
$(document).ready(function() { 
    $('#movieForm').formValidation({ 
     framework: 'bootstrap', 
     icon: { 
      valid: 'glyphicon glyphicon-ok', 
      invalid: 'glyphicon glyphicon-remove', 
      validating: 'glyphicon glyphicon-refresh' 
     }, 
     fields: { 
      title: { 
       row: '.col-xs-8', 
       validators: { 
        notEmpty: { 
         message: 'The title is required' 
        }, 
        stringLength: { 
         max: 200, 
         message: 'The title must be less than 200 characters long' 
        } 
       } 
      }, 
      genre: { 
       row: '.col-xs-4', 
       validators: { 
        notEmpty: { 
         message: 'The genre is required' 
        } 
       } 
      }, 
      director: { 
       row: '.col-xs-4', 
       validators: { 
        notEmpty: { 
         message: 'The director name is required' 
        }, 
        stringLength: { 
         max: 80, 
         message: 'The director name must be less than 80 characters long' 
        } 
       } 
      }, 
      writer: { 
       row: '.col-xs-4', 
       validators: { 
        notEmpty: { 
         message: 'The writer name is required' 
        }, 
        stringLength: { 
         max: 80, 
         message: 'The writer name must be less than 80 characters long' 
        } 
       } 
      }, 
      producer: { 
       row: '.col-xs-4', 
       validators: { 
        notEmpty: { 
         message: 'The producer name is required' 
        }, 
        stringLength: { 
         max: 80, 
         message: 'The producer name must be less than 80 characters long' 
        } 
       } 
      }, 
      website: { 
       row: '.col-xs-6', 
       validators: { 
        notEmpty: { 
         message: 'The website address is required' 
        }, 
        uri: { 
         message: 'The website address is not valid' 
        } 
       } 
      }, 
      trailer: { 
       row: '.col-xs-6', 
       validators: { 
        notEmpty: { 
         message: 'The trailer link is required' 
        }, 
        uri: { 
         message: 'The trailer link is not valid' 
        } 
       } 
      }, 
      review: { 
       // The group will be set as default (.form-group) 
       validators: { 
        stringLength: { 
         max: 500, 
         message: 'The review must be less than 500 characters long' 
        } 
       } 
      }, 
      rating: { 
       // The group will be set as default (.form-group) 
       validators: { 
        notEmpty: { 
         message: 'The rating is required' 
        } 
       } 
      } 
     } 
    }); 
}); 
</script>