기본 유효하지 않음 javacript가 올바로 작동하지 않음

Question

이것은 잘못된 텍스트가 삽입 된 경우 유효하거나 유효하지 않은 것으로 표시되는 간단한 코드입니다.하지만 내가 겪고있는 문제는 유효하지 않은 플래시를 입력하면 화면에 머무르다.

Here is my Fiddle

function validate() 
{ 
    var me = document.getElementById("my").value; 
    if (me == 'my') 
    { 
     document.getElementById("Result").innerHTML = "valid"; 
     document.getElementById("Result").style.color = "green"; 
    } 
    else 
    { 
     document.getElementById("Result").innerHTML = "invalid"; 
     document.getElementById("Result").style.color = "red"; 
    } 
} 
<form> 
    <button type="button" onclick ="yes" class="fa fa-search"></button> 
    <input type="text" id="my" onchange="validate()"></input> 
    <label id="Result"></label> 
</form> 

내가 뭐하는 거지 실수가 무엇이며 내가이 문제를 어떻게 해결할 수 ?

Answer 1

문제는 태그 안에 코드가 있다는 것입니다. 페이지에 머물고 싶다면 양식 제출을 막아야합니다.

여기에 CSS가 포함되어 있지 않습니다.

<div class="container"> 
    <div id="nav"> 

     <div id="search"> 
      <form id="form1"> 
       <button type="button" onclick ="yes" class="fa fa-search"></button> 
       <input type="text" id="my"></input> 
       <label id="Result"></label> 
      </form> 
     </div> 
    </div> 
</div> 

$(document).ready(function(){ 
    $("#form1").submit(function(event){ 
     if (!validate()) { 
      alert("Error"); 
      event.preventDefault(); 
      return false; 
     } 
    }); 
});  

function validate() 
{ 
    var me = document.getElementById("my").value; 
    if (me == 'my') 
    { 
     document.getElementById("Result").innerHTML = "valid"; 
     document.getElementById("Result").style.color = "green"; 
     return true; 
    } 
    else 
    { 
     document.getElementById("Result").innerHTML = "invalid"; 
     document.getElementById("Result").style.color = "red"; 
     return false; 
    } 

} 

Here is a fiddle. 희망적입니다.