빈 텍스트 필드에 대한 표시 오류 메시지 확인

jquery를 사용하여 게시하기 전에 게시 양식의 텍스트 필드가 비어 있는지 확인하고 싶습니다. 있다면, 텍스트 영역 바로 옆에 오류 메시지를 표시하고 싶습니다. 빈 필드가있는 정보를 제출하려면 버튼을 클릭하지만 메시지가 표시되지 않습니다. 게시가 수행되기 전에이 체크 기능이 필요합니다. 여기 내가 한 일이있다. 빈 텍스트 필드에 대한 표시 오류 메시지 확인

if(this.val()=="")

이 여야

<!DOCTYPE html> 
    <html> 
    <head> 
    <script src="jquery-1.7.1.min.js"></script> 
    <script> 
    function ValidateForm() 
    { 
     $(document).ready(function(
       { 
        $("#personID").each(function() 
         { 
          if(this.val()=="") 
          { 
           $("#error_msg").html("Field needs filling"); 
          }    
         }  
       } 
     )); 

    } 


    </script> 
    </head> 
    <body> 
    <form action="action.php" method="post" id="personID"> 
    First Name: <input type="text" name="first"><span id="error_msg"></span></br> 
    Last Name: <input type="text" name="last"><span id="error_msg"></span></br> 
    Phone: <input type="text" name="phone"><span id="error_msg"></span></br> 
    Mobile: <input type="text" name="mobile"></br> 
    Position: <input type="text" name "pos"><span id="error_msg"></span></br> 
    <input type="button" value="Insert" onclick="ValidateForm"> 
    </form> 
    </body> 
    </html>

출처

2012-01-20 Mackintoast

그리고 귀하의 질문은 무엇입니까? – cambraca

기능은

function ValidateForm() 
{ 
    $('span.error_msg').html(''); 
    var success = true; 
    $("#personID input").each(function() 
     { 
      if($(this).val()=="") 
      { 
       $(this).next().html("Field needs filling"); 
       success = false; 
      } 
    }); 
    return success; 
}

을해야하며, 양식은 당신은 당신의 전화 텍스트 상자 옆에있는 범위를 추가하지 않았다

<form action="action.php" method="post" id="personID" onsubmit="return ValidateForm();"> 
    First Name: <input type="text" name="first"><span class="error_msg"></span></br> 
    Last Name: <input type="text" name="last"><span class="error_msg"></span></br> 
    Phone: <input type="text" name="phone"><span class="error_msg"></span></br> 
    Mobile: <input type="text" name="mobile"></br> 
    Position: <input type="text" name "pos"><span class="error_msg"></span></br> 
    <input type="submit" value="Insert"> 
</form>

해야하고 비어있는 경우 양식이되지 않습니다 제출 했으므로 오류 메시지도 표시되지 않으므로 확인하십시오. 선택 사항으로 남겨두고 싶은 경우 클래스를 (class='optional')에 추가하고 if($(this).val()=="")을 if($(this).val()=="" && !$(this).hasClass('optional'))으로 변경하십시오. 그게 다야.

출처

2012-01-20 23:24:11

이 ...

if($(this).val()=="")

하거나 ...

if(!$(this).val())

하거나 ...

if(!this.value)

는 $ 기능 (요소에 대한 참조이다) this 전달하는 요소를 참조하고있는 jQuery 객체를 리턴한다.

그렇기 때문에 .val()과 같은 jQuery 메서드를 호출 할 수 있습니다.

실제로 구문이 엉망입니다. 양식이 제출 될 때까지 코드가 실행되지 않기 때문에

는 $(document).ready()을 위해 ...이에

function ValidateForm() { 
    if($("#personID").val()=="") { 
     $("#error_msg").html("Field needs filling"); 
    }    
}

필요가 없습니다 당신의 코드를 변경

출처

2012-01-20 22:45:59

양식에서 onsubmit 이벤트를 사용할 수 있습니다. 당신은 확실 변경 확인 :

function ValidateForm() 
{ 
    $('span.error_msg').html(''); 
    var success = true; 
    $("#personID input").each(function() 
     { 
      if($(this).val()=="") 
      { 
       $(this).next().html("Field needs filling"); 
       success = false; 
      } 
    }); 
    return success; 
} 


<form action="action.php" method="post" id="personID" onsubmit="return ValidateForm();"> 
First Name: <input type="text" name="first"><span class="error_msg"></span></br> 
Last Name: <input type="text" name="last"><span class="error_msg"></span></br> 
Phone: <input type="text" name="phone"><span class="error_msg"></span></br> 
Mobile: <input type="text" name="mobile"></br> 
Position: <input type="text" name="pos"><span class="error_msg"></span></br> 
<input type="submit" value="Insert"> 
</form>

편집 아주 좋은 지적 Heera, 정말 지불하지 않은주의 :

<input type="button" value="Insert" onclick="ValidateForm">

<form action="action.php" method="post" id="personID"><form action="action.php" method="post" id="personID" onsubmit="return ValidateForm();">

아래

전체 코드에 <input type="submit" value="Insert">로 그 문제에 ;-) 코드가 수정되었습니다.

출처

2012-01-20 22:59:46

릭 카이 퍼스 (Ryick Kuipers)는 이미 좋은 해결책을 제시해 주었지만 스팬의 "error_msg"가 클래스가 아닌 것으로 선언되었음을 알지 못했다고 생각합니다. 그래서 제대로 작동하지 않을 것입니다. 첫 번째 스팬에만 오류 메시지가 표시됩니다. 이 문제를 해결하려면 "error_msg"범위에서 id 대신 클래스를 사용해야합니다. –

좋은 지적! 오류 메시지보다는 제출을 해결하는 데 더 많은 관심을 기울였습니다 ;-) 코드에 따라 코드가 수정되었습니다. 감사합니다. –

감사합니다. 괜찮습니다. 종종 실수를합니다. –

빈 텍스트 필드에 대한 표시 오류 메시지 확인

답변

관련 문제