html 폼 유효성 검사를 사용하여 이미지를 표시하는 방법

Question

여러 텍스트 상자가있는 HTML 양식을 만들었습니다. 내가하고 싶은 일은 텍스트가없는 상자 옆에 작은 이미지를 표시하는 javascript 스크립트를 만드는 것입니다.

을 내가 원하는만큼 양식의 유효성을 검사하는 다음 스크립트를 생성 한 순간 '내가 돈 때문에 그러나 그것은 단지 팝업 상자가 표시됩니다 : 여기에 내가 뭘 원하는지의 예입니다 이미지/텍스트를 표시하는 방법을 알고 있습니다. 다음은 내가 가지고있는 코드입니다.

<script type="text/javascript"> 
    function validateForm() 
    { 
     var x=document.forms["email_form"]["name"].value; 
     if (x==null || x=="") 
     { 
      alert("Please enter your name in the box provided."); 
      return false; 
     } 

     var x=document.forms["email_form"]["email"].value; 
     if (x==null || x=="") 
     { 
      alert("Please enter your e-mail address in the box provided."); 
      return false; 
     } 

     var x=document.forms["message-title"]["name"].value; 
     if (x==null || x=="") 
     { 
      alert("Please enter a message title in the box provided."); 
      return false; 
     } 

     var x=document.forms["email_form"]["message"].value; 
     if (x==null || x=="") 
     { 
      alert("Please enter your message in the box provided."); 
      return false; 
     } 
    } 
    </script> 

누군가 올바른 방향으로 나를 가리킬 수 있습니까?

Answer 1

입력 요소 옆에 이미지 요소 오류가있을 수 있지만 css에서 표시 속성을 숨길 수 있습니다. 입력 요소에 연결된 각 오류 이미지에 대해 ID를 가질 수 있습니다. 예를 들어 전자 메일 입력의 경우 have 및 img 요소가 필요합니다. 이 같은 초기 CSS를 가지고 ->

#email_form img{ 
    display: none; 
} 

다음 자바 스크립트, 단순히 숨겨진 이미지 표시

-

var x=document.forms["email_form"]["email"].value; 
    if (x==null || x=="") 
    { 
     var error_image = document.getElementById('error_email'); 
     error_image.style.display = 'inline'; 
     alert("Please enter your e-mail address in the box provided."); 
     return false; 
    } 

Answer 2

당신이 클래스를

.validateimage 
{ 
display:none; 
} 

을 정의하고 그 지정 CSS에서을 모든 이미지 태그와 같은 클래스

<img class="validateimage" id="image1"> 
. 
. 
. 

다음으로

<script type="text/javascript"> 
     function validateForm() 
     { 
      var x=document.forms["email_form"]["name"].value; 
      if (x==null || x=="") 
      { 
       document.getElementById('image1').style.display='block'; 
       return false; 
      } 

      var x=document.forms["email_form"]["email"].value; 
      if (x==null || x=="") 
      { 
       document.getElementById('image2').style.display='block'; 

       return false; 
      } 

      var x=document.forms["message-title"]["name"].value; 
      if (x==null || x=="") 
      { 
       document.getElementById('image3').style.display='block'; 
       return false; 
      } 

      var x=document.forms["email_form"]["message"].value; 
      if (x==null || x=="") 
      { 
       document.getElementById('image4').style.display='block'; 
       return false; 
      } 
     } 
     </script>