비어있는 필수 입력 필드가 유효하지 않음

Question

비어 있지 않음input 요소를 무효화하는 방법을 알아야합니다. 예를 들어

:

<input pattern="[0-9]+" title="" /> 

이 필드는 입니다 : 필요하지 않는 한, 기본적으로 유효. 나는 그것을 으로 바꿀 필요가있다 : 만일 그것이 비어 있다면이 무효하다.

감사합니다. 건배.

편집 :

HTML :

<div> 
    <input type="text" name="Country" pattern="[a-zA-Z ]+" title="" placeholder="Country" /> 
    <a href="#">Toggle</a> 
</div> 

CSS : 필요하지 않은 <input> 내부에 텍스트가 없기 때문에

input:valid + a 
{ 
    color: blue; 
} 

<a> 시작 블루.

의사 - 클래스 : 유효한 상태 빈 비 필요한<input> 요소는 사실입니다.

<input> 필드가 비어있을 때은 채색되지 않은 인 채 이 필요합니다.

Answer 1

이 답변은 스타일에 관한 것으로 보이는 명확한/수정 된 질문을 해결합니다. input 요소는 값이 비어 있으면 선택기 :invalid과 일치 할 수 없습니다. 이러한 요소는 제약 조건 유효성 검사에서 제외됩니다 (첫 번째 대답에서 설명한대로). input 요소의 값이 비어 있거나 비어 있지 않은지 확인하기위한 선택기가 없습니다. 합니다 (내용에 대한 :empty 의사 클래스 테스트는 비어있는, 그리고 input 요소는 항상 비어있는 콘텐츠가 있습니다.)

은 그래서는 (단독) CSS에서 수행 할 수 없습니다. 예 : 자바 스크립트를 사용할 수 있습니다. 모든 입력 조작은 input 요소 값이 점검되도록합니다. 값이 비어 있지 않으면 ok과 같이 input 요소를 클래스에 넣습니다. 그에 따라 CSS 선택기를 수정하십시오.

<style> 
input:valid + a.ok { 
    color: blue; 
}  
</style> 
<input ... oninput=check(this)> 
... 
<script> 
function check(el) { 
    el.nextElementSibling.className = el.value ? 'ok' : ''; 
} 

이 충분히 현대적인 브라우저에서 작동

. 더 넓은 브라우저 범위가 필요한 경우 동일한 검사를 실행하는 데 사용되는 onkeypress 및 onpaste 등과 같은 이벤트 속성을 추가해야 할 수 있습니다. ,

업데이트을 (그리고 nextElementSibling는. 다음 요소에 점점 일부 웃기시 방법으로 대체해야 할 수도 있습니다) 아래의 의견에 따라, 당신은 input 요소에 클래스를 설정하기보다는하여 코드를 어느 정도 단순화 할 수 있습니다 a 요소 즉, CSS 선택기는 input:valid.ok + a이고 JavaScript 할당 문은 왼쪽으로 el.className이됩니다. 브라우저 범위에 관해서는 IE 9 이하에서 지원하지 않는 가상 클래스 사용으로 인한 기본 제한과 비교할 때 여기에는 문제가 없을 것입니다.

Answer 2

pattern 속성과 동일한 (제한적이지만 증가하는) 브라우저 지원을 갖는 required 속성을 추가해야합니다. required attribute은을 의미하므로 값이 비어 있어야 함을 의미하므로 "비 필수 비어있는"요소를 무효로 만들 수 없습니다.

HTML5 CR의 pattern attribute에 대한 설명에 따르면 값이 비어 있지 않은 경우에만 제약 조건 유효성 검사에 특성이 사용됩니다. 이것은 빈 문자열이 항상 패턴과 일치하는 것으로 간주되도록 (하지만 실제로는 패턴을 검사하지도 않습니다) 이렇게 말할 수 있습니다.