여러 필드의 자바 유효성 확인

-1

양식에서 여러 필드의 유효성을 검사하고 싶습니다. 그 때문에 나는 모든 필드에 대해 별도의 조건을 쓰고 싶지 않습니다. 그래서 키와 값 쌍과 같은 오류 메시지를 할당했습니다. 값을 입력하지 않고 모든 입력란을 떠날 경우 오류 메시지가 입력됩니다.여러 필드의 자바 유효성 확인

이것은 내 HTML 코드입니다.

<head> 
<title></title> 
<script src="Scripts/validate_register.js"></script> 
</head> 
<body> 
<table class="valid"> 
     <tr> 
      <td>id:</td> 
      <td><input type="text" id="id1" placeHolder="Enter your name"/></td></tr> 
      <tr><td>email:</td> 
      <td><input type="text" id="id2" placeHolder="Enter your email"/></td></tr> 
      <tr><td>password:</td> 
      <td><input type="text" id="id3" placeHolder="Enter your password"/></td></tr> 
      <tr><td>address:</td> 
      <td><input type="text" id="id4" placeHolder="Enter your address"/></td></tr> 
      <tr><td>contact no:</td> 
      <td><input type="text" id="id5" placeHolder="Enter your contact no"/></td> 
     </tr> 
        <tr><td><input type="submit" onclick="validate()" value="submit"> </td></tr></table> 
    </body>

이것은 내 자바 스크립트 코드입니다.

function validate() { 
     var error={ 
        id1:'name Cannot be empty', 
        id2:'email cannot be empty', 
        id3:'password cannot be empty', 
        id4:'address Cannot be empty', 
        id5:'contactno cannot be empty' 

     } 
     var elements=document.querySelectorAll('input'); 
     for(var i=0;i<elements.length;i++){ 

     if(elements[i]['value']=="") 
     { 
        var id=elements[i]['id']; 
        document.querySelector("."+id).innerHTML=error[id]; 
     } 
     } 

}

이 뭔가 null 인에 대한 document.querySelector("."+id).innerHTML=error[id]; 라인에 오류가 표시됩니다.

출처

2014-06-22 user3764346

document.querySelector ("."+ id) .innerHTML = error [id]; 이 행에 오류가 표시됩니다. innerHTML은 null입니다 – user3764346

-1

document.querySelector (+ ID ".") .innerHTML = 오류 [ID]으로; 만약 클래스 input의 id (예 class="id2" 등)에 대응하는 요소가 기대

. 귀하는 귀하의 질문에 이들 중 아무 것도 표시하지 않았습니다. querySelector은 일치하는 요소를 찾을 수없는 경우 null을 반환합니다.

당신이 적절한 위치에서이 같은 것들의 시리즈를 추가하는 경우 :

<span class="id1"></span>

... 그 요소가 <input id="id1">에 대한 오류 메시지가 표시됩니다. 또는 물론 이러한 요소가 고유하므로 error_id1, error_id2 등과 같은 id을 사용할 수 있습니다. 여기

완전한 예제 사용 클래스 : 위에서 Live Copy

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Example</title> 
    </head> 
    <body> 
    <table class="valid"> 
     <tr> 
     <td>id:</td> 
     <td><input type="text" id="id1" placeHolder="Enter your name"/><span class="id1"></span></td></tr> 
     <tr><td>email:</td> 
     <td><input type="text" id="id2" placeHolder="Enter your email"/><span class="id2"></span></td></tr> 
     <tr><td>password:</td> 
     <td><input type="text" id="id3" placeHolder="Enter your password"/><span class="id3"></span></td></tr> 
     <tr><td>address:</td> 
     <td><input type="text" id="id4" placeHolder="Enter your address"/><span class="id4"></span></td></tr> 
     <tr><td>contact no:</td> 
     <td><input type="text" id="id5" placeHolder="Enter your contact no"/><span class="id5"></span></td> 
     </tr> 
     <tr><td><input type="button" onclick="validate()" value="submit"> </td></tr></table> 
    </body> 
    <script> 
    "use strict"; 

    function validate() { 
     var error={ 
     id1:'name Cannot be empty', 
     id2:'email cannot be empty', 
     id3:'password cannot be empty', 
     id4:'address Cannot be empty', 
     id5:'contactno cannot be empty' 

     } 
     var elements=document.querySelectorAll('input'); 
     for(var i=0;i<elements.length;i++){ 

     var id=elements[i]['id']; 
     document.querySelector("."+id).innerHTML=elements[i].value ? "" : error[id]; 
     } 

    } 
    </script> 
</body> 
</html>

, 필드 값을했을 때 그것을 실행하는 두 번째 시간, 오류가 사라지도록 나는 또한 이 오류를 삭제했습니다 . (나는 또한 버튼을 제출 그냥 버튼을 변경,하지만 양식이 예에서 아무 제출되지되지 않는 경우에만 않도록합니다.)

사이드 노트 : 나는 폼에 onsubmit에 validate를 이동할 것 , 오류가있는 경우 false을 반환해야합니다.

출처

2014-06-22 08:56:40

감사합니다. 잘 작동합니다. 내 코드를 최소화하는 다른 방법이 있습니까? 5 개의 필드에 5 개의 스팬 클래스를 제공하는 대신, 어떻게 공통 클래스를 제공 할 수 있으며 또한 스크립트에서 액세스해야합니다. – user3764346

@ user3764346 : 다양한 옵션이 있습니다. 예를 들어, 마크 업에서'span '을 갖는 것보다는 오류가있는 경우'insertAdjacentHTML' 또는'createElement'과'insertBefore'를 사용하여 추가 할 수 있습니다. 존재하지 않으면 오류를 제거 할 수 있습니다 .내 제안은 실제로 각 필드의 오류가 다를 수있는 경우에만 의미가 있습니다 (예를 들어,'email' 필드에'@'가 있는지 확인하고 빈칸이 아닌지 확인). 그럴 수 없다면 처음에는 숨겨진 마크 업에 오류를 포함하는 범위를 넣은 다음 유효성 검사에서 표시/숨길 수 있습니다. 선택의 여지가 많습니다. –

Downvoters : 코멘트가없는 Downvoting은 종종 (매우 명백한 경우) 완벽하게 합리적이며, 항상 그렇게 할 권리가 있습니다. 그러나이 경우 OP가 답변을 수락 한 후에 각자가 싫어하는 것처럼 특히 유용하지 않다고 생각하는 이유를 잠시 생각할 수 있다면 (예 : 그/그녀에게 분명히 유용 할 것입니다 *), 나는 그것을 바르게 평가할 것이다. 그 대답이 유용하지 않다고 생각하는 * 이외의 이유로 downvoting은 파손과 Stack Overflow에 대한 해를 끼치는 것입니다. –

-1

.은 수업을위한 것입니다. ID를 검색하려면 #을 사용해야합니다. 또한 innerHTML이 아니라 value을 사용해야합니다. 따라서, 정확한

document.querySelector("."+id).innerHTML=error[id];

document.querySelector("#"+id).value=error[id];

출처

2014-06-22 08:56:27 Bluefire

여러 필드의 자바 유효성 확인

답변

관련 문제