값에 따라 필수 양식 입력에서 CSS 스타일을 변경하는 방법

Question

필요한 양식 요소의 스타일을 변경하는 방법을 알고 싶습니다. 가치가있는 경우 변경하십시오.

내가 원하는 것은 비어있을 때 필요한 텍스트 필드 주위에 색칠 된 테두리를두고 값이있을 때 테두리 스타일을 제거하는 것입니다. 내가 일을 생각했는지

는 값이 비어있는 경우 확인하는 하나의 자바 스크립트 함수를 작성하고 적절한 스타일을 설정하는 것입니다 :

function requiredElement(id) { 
    var Input = document.getElementById(id); 
    if(Input.value==null) { 
    Input.style.border = '2px solid #FF0000'; 
    } 
} 

그러나 무엇 나는대로 스타일을 변화와 붙어있어 사용자는이 필수 필드에서 문자를 입력/제거하고 해당 필드에 대한 함수를 호출합니다.

간단한 html 양식이 있으며 각 입력에는 고유 한 ID가 있습니다.

Answer 1

사용 jQuery를

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script> 

그런 다음이 코드를 추가

$('.important').change(function() { 
    if(($(this).val()) != '') $(this).css('border-width', '0'); 
    else $(this).css('border-width', '2'); 
}); 

당신이 요소의 값이 변경, 바인딩 할 때

.important 
{ 
    border-style:solid; 
    border-width:2px; 
    border-color:red; 
} 

Answer 2

가 확인하려면 CSS에서 테두리를 추가 가정을 당신의 사용자 지정 함수를 onchange 및 onkeypress 이벤트 (또는 jQuery, .change() 및 .keypress()에 결합).

실제로 요소 모양을 변경하려면 CSS 클래스에 스타일을 정의하고 JavaScript를 사용하여 적절하게 클래스를 추가/제거하는 것이 가장 좋습니다. 사용 jQuery를에서 .addClass() 기능

element = document.getElementById("myElement"); 
element.className = "invalid"; 

을 또는 :

$("#myElement").addClass("invalid"); 

---

HTML :

<input id="something" name="something" type="text" class="inputClass" 
    onchange="requireElement(this)" 
    onkeypress="requireElement(this)" /> 

을

이 같은 자바 스크립트를 통해 HTML 요소의 CSS 클래스를 변경할 수 있습니다

JavaScript :

function requireElement(element) { 
    if(element.value == null) 
     element.className = "inputClass invalid"; 
    else 
     element.className = "inputClass"; 
}