요소의 색상을 기반으로 양식의 유효성을 검사하는 것이 좋습니다.

Question

데이터를 제출하기 전에 유효성 검사 스크립트가있는 양식을 작성 중입니다.

기본적으로 모든 입력 필드에는 'onchange'이벤트에 의해 트리거 된 입력 내용이 올바른지 테스트 할 수있는 함수가 있습니다. 내용이 '유효하지 않은'경우 함수는 해당 입력 필드의 배경을 빨간색으로 설정합니다.

function looseColorQty(t) 
    { 
    var n = t.value; 
    if(isNaN(n) == true || n < 0){ 
     t.style.backgroundColor="red";  
    } else { 
     t.style.backgroundColor=""; 
     } 
    } 

그런 다음 사용자가 버튼을 클릭 '제출'할 때,이 양식은 입력 필드 중 하나가 '빨간색'인 경우 기반으로 제출 할 수 있는지 확인하기 위해 다른 스크립트가있다.

var canNotSubmit = 0; 
function checkError(){ 
    var fieldsToCheck = document.getElementsByTagName("input"); 
    var fieldsQty = fieldsToCheck.length; 

    for(var i=0; i<fieldsQty; i++){ 
     var checkTarget = fieldsToCheck[i].style.backgroundColor; 

      if(checkTarget == "red"){ 
      document.getElementById("tips").className = "tipError"; 
      document.getElementById("tips").innerHTML = "Please correct all RED fields before you submit."; 
      canNotSubmit = 1; 
      return; 
     } 
     } 
     } 

실제로 작동하지만이 유효성 검사가 색상을 기반으로한다는 이상한 느낌이 들었습니다. 나는 점을 찍어서 어떤 결점이 있는지 알고 싶다.

Answer 1

나는 이것이 좋은 생각이 아니라고 생각합니다.

대신 HTML5 필드 유효성 검사를 사용하지 않는 경우 필드의 속성을 첨부 (또는 변경)합니다. 예를 들어 대신 data-validation="invalid" 특성을 첨부 한 다음 CSS를 스타일 빨간색 배경으로 사용하십시오.

시맨틱 (의미)에 관한 기본 사항은 외관상의 것이 아닙니다.

그런 다음 onsubmit 처리기는 data-validation="invalid" 필드를 확인하고 해당 필드를 기반으로 메시지를 발행 할 수 있습니다. 데이터가 항상 클라이언트 유효성 검사를 통과 한 후 무단으로 변경 될 수있다 -

는 클라이언트 측 유효성 검사를 신뢰할 수 없기 때문에 항상, 제출 후 서버에 다시을 확인 하는 것을 잊지 마십시오.

Answer 2

요소에 클래스 이름을 추가합니다. value-is-invalid처럼 클래스 classname 요소에이 클래스가 포함되어 있는지 확인할 수 있습니다. background-color: red;을 CSS 파일에서이 클래스로 이동할 수도 있습니다. 따라서 논리에서 스타일을 분리하고 나중에 스타일을 더 쉽게 변경할 수 있습니다.

등 :

.value-is-invalid { 
    background-color: red; 
} 

스티븐 P는 클라이언트 측 유효성 검사에 의존 할 수 없습니다 지적. 항상 서버 측에서도 유효성을 검사합니다.