부트 스트랩에서 '필수'필드 정의
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
입력 주위에 빨간색 테두리가 표시됩니다. 그러나 이것은 필드의 실제 검증에는 영향을 미치지 않습니다. 필드를 필수로 만들려면 추가 클라이언트 (자바 스크립트) 또는 서버 로직을 추가해야합니다.
기본 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
'code' 카테고리의 다른 글
C ++ 맵에 해당하는 C # (0) | 2020.12.04 |
---|---|
심볼릭 링크를 먼저 삭제하지 않고 편집하는 방법이 있습니까? (0) | 2020.12.04 |
Android 4.4에서 content : // URI를 실제 경로로 변환 (0) | 2020.12.03 |
Flask는 템플릿 파일이 존재하더라도 TemplateNotFound 오류를 발생시킵니다. (0) | 2020.12.03 |
Objective-C를 사용하여 프로그래밍 방식으로 텍스트 파일 읽기 (0) | 2020.12.03 |