Показать ошибку после нажатия кнопки Javascript

Question

После того, как моя кнопка будет нажата, я проверю, не пусто ли мои текстовые поля. Моя проверка работает, но если я покажу свое сообщение, это покажет несколько секунд. Вероятно, продолжительность нажатия кнопки. Вот какой код я пробовал.

<form> 
    <div id="errorblock"> 
     <p id="errortext">Error.</p> 
    </div> 
    <!-- here are my input fields--> 

    <button>Send</button> 
</form> 

Здесь я добавляю мой слушатель событий после инициализации страницы:

document.getElementsByTagName("button")[0].addEventListener("click", function(){ 
    sendEmail(); 
}); 

function sendEmail() { 

    //check if all fields are fill in. If not do this code; 
    document.getElementById("errortext").innerHTML = "Fill in all the fields please."; 

    var errorblock = document.getElementById("errorblock");  
    errorblock.style.visibility = "visible"; 
    errorblock.style.height = "46px"; 
} 

Может кто-нибудь мне помочь? Thanks

Answer 1

По умолчанию HTMLButtonElement имеет type="submit". Это означает, что при нажатии кнопки форма отправляется. Вы должны убедиться, что вы не допустили этого представления в случае ошибок в форме. Например, путем вызова preventDefault методы объекта события:

document.getElementsByTagName("button")[0].addEventListener("click", function (e) { 
    if (!sendEmail()) { 
     e.preventDefault(); 
    } 
}); 

function sendEmail() { 

    //check if all fields are fill in. If not do this code; 
    document.getElementById("errortext").innerHTML = "Fill in all the fields please."; 

    var errorblock = document.getElementById("errorblock"); 
    errorblock.style.visibility = "visible"; 
    errorblock.style.height = "46px"; 

    // if there are errors return false 
    // return true if input is correct 
    return false; 
} 

Также рекомендую слушать onsubmit событие на форме вместо события нажатия кнопки:

document.querySelector("form").addEventListener("submit", function (e) { 
    if (!sendEmail()) { 
     e.preventDefault(); 
    } 
});