code

부트 스트랩에서 '필수'필드 정의

codestyles 2020. 12. 3. 07:54
반응형

부트 스트랩에서 '필수'필드 정의


Twitter Bootstrap 3에서 필요에 따라 텍스트 필드 (빨간색 테두리 포함)를 어떻게 정의합니까?

required="required" 작동하지 않습니다 ...

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="exampleInputFile">File input</label>
    <input type="file" id="exampleInputFile">
    <p class="help-block">Example block-level help text here.</p>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox"> Check me out
    </label>
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

required="true"부트 스트랩 3에서 사용해보십시오


2018 업데이트

원래 답변 HTML5 유효성 검사가 이제 모든 최신 브라우저에서 지원됩니다. 이제 필요한 필드를 만드는 가장 쉬운 방법은 단순히 필요한 속성을 사용하는 것입니다.

<input type="email" class="form-control" id="exampleInputEmail1" required>

또는 호환 HTML5 :

<input type="email" class="form-control" id="exampleInputEmail1" required="true">

Bootstrap 4 유효성 검사에 대해 자세히 알아보기


Bootstrap 3에서는 부모 요소에 "유효성 검사 상태"클래스를 적용 할 수 있습니다. http://getbootstrap.com/css/#forms-control-validation

예를 들어 has-error입력 주위에 빨간색 테두리가 표시됩니다. 그러나 이것은 필드의 실제 검증에는 영향을 미치지 않습니다. 필드를 필수로 만들려면 추가 클라이언트 (자바 스크립트) 또는 서버 로직을 추가해야합니다.

데모 : http://bootply.com/90564



기본 HTML5 양식 유효성 검사를 확인하세요.

http://www.the-art-of-web.com/html/html5-form-validation/


데이터 API 또는 JavaScript를 통해 마크 업에서 양식 유효성 검사를 활성화 할 수 있습니다. data-toggle="validator"양식 요소 에 추가 하여 양식 유효성 검사를 자동으로 활성화합니다 .

<form role="form" data-toggle="validator">
   ...
</form>

또는 JavaScript를 통해 유효성 검사를 활성화하십시오.

$('#myForm').validator()

입력 필드에 필수 플래그 를 사용해야 합니다.

자세한 내용은 여기를 클릭하십시오


novalidate = "novalidate"가 양식에 첨부되어있는 경우 작동하지 않는 경우.


필드를 필수로 만들려면 required또는required="true"

required="required"부트 스트랩 버전 3에서는 더 이상 사용되지 않는 것 같습니다 .


양식 그룹과 별도로 '필요 유효성 검사'를 사용하면 작동합니다.

참고URL : https://stackoverflow.com/questions/19640616/defining-a-required-field-in-bootstrap

반응형