Function does not execute on razor page when called from javascript file

I have been trying to call my function in the ‘onsubmit’ part of my form however, whenever I execute my application the alert is not appearing when searching an empty string.

When the function is written in the razor page itself (using script tags), it works fine. It seems like if I separate this function in its own javascript file, it does not want to work.

Razor Page Code:

MainHomePage Razor Page

My Javascript file:

function CheckForBlank() {
if (!document.getElementById("searchInput").value.trim().length) {
    alert("Please enter a card name.");
    return false;
}}

Any help on this would be very much appreciated.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You just need to put the name of the function
It will work..

<form method="post" onsubmit="CheckForBlank">
...
</form>

Method 2

@section scripts{
<scipt>
function CheckForBlank() {
if (!document.getElementById("searchInput").value.trim().length) {
    alert("Please enter a card name.");
    return false;
}}
</script>
}

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0