false를 반환하는 대신 preventDefault를 사용하여 다시 작성하는 방법은 무엇입니까?

Question

그냥 false를 반환하는 대신 preventDefault를 작성하는 방법을 더 잘 이해합니다. 다음은 false를 반환하는 예제입니다. 내가로 preventDefault

를 사용하여이 코드를 다시 작성하고 싶은

내 HTML :

<form name="myForm" action="formPracticePHP.php" method="post" onsubmit="return validateForm()"> 

    <p>Enter your Name: <input type="text" name="name" value="" placeholder="[your-name]" required="required" /><br /></p> 
    <p>Enter your Age: <input type="number" name="age" size="6" value="" /><br /></p> 

    <p>Please Select Your Favorite Fruit</p> 
    <select name="fruit" id="fruit"> 
     <option value="nothing" selected="selected">Select A Fruit</option> 
     <option value="Bannana">Bannana</option> 
     <option value="Kiwi">Kiwi</option> 
     <option value="Mango">Mango</option> 
     <option value="Apple">Apple</option> 
     <option value="Cherry">Cherry</option> 
    </select> 

    <input type="submit" name="submit" value="submit" id="submitBtn" /> 
</form> 

내 자바 스크립트

function validateForm() { 
    var x = document.forms["myForm"]["age"].value; 
    var x2 = document.forms["myForm"]["fruit"].value; 
     if ((x==null || x=="") || (x2 == null || x2=="nothing")) { 
     alert("Age and fruit selection must be filled out"); 
     return false; 

     } 
} 

Answer 1

당신은 당신의 핸들러에 event 인수를 전달해야

<form onsubmit="validateForm(event)" > 

그리고 기능 변경

JavaScript에서 처리기를 설정하는 경우 위의 동일한 기능이 작동합니다.

function validateForm(e) { 
    var x = document.forms["myForm"]["age"].value; 
    var x2 = document.forms["myForm"]["fruit"].value; 
    if ((x==null || x=="") || (x2 == null || x2=="nothing")) { 
     alert("Age and fruit selection must be filled out"); 
     e.preventDefault(); // here  
    } 
} 

이 작업을 수행하기 위해 당신의 HTML에 onsubmit 속성을 사용하는 경우, 당신은 제거 할 수 있습니다

Answer 2

validateForm이 양식에 대한 onsubmit 핸들러로 등록되어 있다고 가정하면, 당신은이 작업을 수행 할 수 있어야한다 return 부분과 당신이 그것에 이벤트를 통과해야합니다 그러나

onsubmit="validateForm(event)" 

, 나는 강력하게 HTML을 사용하지 않는 것이 좋습니다 것입니다 것은 사용하여 핸들러를 등록하는 대신 이벤트 핸들러를 지정하고 속성 귀하의 자바 스크립트 코드 :

window.onload = function() { 
    document.forms["myForm"].addEventListener("onsubmit", validateForm); 
};