양식 onclick가 작동하지 않습니다.

Question

현재 JS를 배우고 필드가 비어 있는지 확인하는 유효성 검사 함수를 만들려고합니다. 제출 버튼을 클릭하면 Chrome의 JS 콘솔에 무엇인가 표시되지만 아무 것도 보지 않을 것으로 예상됩니다. 왜 콘솔에 아무것도 표시되지 않습니까?

var field1 = document.getElementById("field1"); 
var field2 = document.getElementById("field2"); 
var submitBtn = document.getElementById("submitBtn"); 

function validate() { 

    if(field1 === "" || field2 === "") { 
     console.log("Make sure all fields have been filled out correctly"); 
    } else { 
     console.log("they are full"); 
    } 
} 


<form action="" action="get"> 
    <input type="text" id="field1" name="field1" autocomplete="off" placeholder="Enter something"/> 
    <input type="text" id="field2" name="field2" autocomplete="off" placeholder="Enter that thing again"/> 
    <input type="submit" id="submitBtn" name="submitBtn" value="Submit" onclick="return validate()" /> 
</form> 

Answer 1

양식을 제출하지 않는 경우는 그냥 버튼을 만드는 대신 .Submit이

다음 코드

var submitBtn = document.getElementById("submitBtn"); 
 

 
function validate() { 
 
var field1 = document.getElementById("field1").value; 
 
var field2 = document.getElementById("field2").value; 
 
    if (field1 === "" || field2 === "") { 
 
    console.log("Make sure all fields have been filled out correctly"); 
 
    } else { 
 
    console.log("they are full"); 
 
    } 
 
}

<form action="" action="get"> 
 
    <input type="text" id="field1" name="field1" autocomplete="off" placeholder="Enter something" /> 
 
    <input type="text" id="field2" name="field2" autocomplete="off" placeholder="Enter that thing again" /> 
 
    <input type="button" id="submitBtn" name="submitBtn" value="Submit" onclick="return validate()" /> 
 
</form>

을 확인하시기 바랍니다 제출하는 양식을 만들어 제출하기

희망 하시겠습니까?

Answer 2

양식 제출은 새로 고침을 초래하는 데이터를 다시 게시 할 것이므로 그 전에 콘솔 로그를 보지 못할 수도 있습니다.

console.log 다음에 false를 추가하여 데이터를 캡처합니다. 또한 빈 상태와 비교하면서 값을 가져 오려면 element 대신 element.value를 사용해야합니다. 유효성 검사가 통과되면 제출하려는 경우 return true를 추가하십시오.

<form action="" action="get"> 
 
    <input type="text" id="field1" name="field1" autocomplete="off" placeholder="Enter something"/> 
 
    <input type="text" id="field2" name="field2" autocomplete="off" placeholder="Enter that thing again"/> 
 
    <input type="submit" id="submitBtn" name="submitBtn" value="Submit" onclick="return validate()" /> 
 
</form> 
 
<script> 
 
var field1 = document.getElementById("field1"); 
 
var field2 = document.getElementById("field2"); 
 
var submitBtn = document.getElementById("submitBtn"); 
 

 
function validate() { 
 

 
    if(field1.value === "" || field2.value === "") { 
 
     console.log("Make sure all fields have been filled out correctly"); 
 
     return false; 
 
    } else { 
 
     console.log("they are full"); 
 
     return false; 
 
    } 
 
    
 
} 
 

 
</script>