e.preventDefault() is not working for submit button and anchor tag in MVC

Question

In my ASP.Net Core MVC App

View

<form>
<div class="container">
    <div class="row">
        <div class="col-md-offset-2 col-md-4">
            <div class="form-group">
                <input type="text" class="form-control small" asp-for="UserName" />
            </div>
            <div class="form-group">
                <input type="text" class="form-control small" asp-for="Password" />
            </div>
            <div class="form-group">
                <a class="btn btn-sm btn-success pull-right" asp-action="Validate" asp-controller="LogIn" onclick="ValidateLogin()">Log In</a>
                <input type="submit" value="LogIn" asp-action="Validate" asp-controller="LogIn" onclick="ValidateLogin(this)" />
            </div>
        </div>
    </div>
</div>

TypeScript Code

   function ValidateLogin(e:Event) {
    var username = (document.getElementById('UserName') as HTMLInputElement).value;
    var password = (document.getElementById('UserName') as HTMLInputElement).value;
    if ((username.length > 0) && (password.length > 0)) {

    }
    else {
        alert('Fields required');
        e.preventDefault();
    }
}

If fields are empty than it should terminate the request , but it only display alert and e,preventDefault() is ineffective here .

I also tried return false , but nothing seems to work here . It should not go to action method after preventDefault or return false statement

Can somebody tell me what am i missing here in this very simple task ?

Update 1

If i change the code in below way , than it works

document.getElementById('btn').onclick = function (e) {
var username = (document.getElementById('UserName') as HTMLInputElement).value;
var password = (document.getElementById('UserName') as HTMLInputElement).value;
if ((username.length > 0) && (password.length > 0)) {

}
else {
    alert('Fields required');
    return false;
}

}

Still i dont know why it is not working when i wrap it in a method instead of calling directly with .onclick()

Answer 1

onclick="ValidateLogin(this)"

Your problem is your ValidateLogin method. You pass the "this" context and your method expects an event parameter.

Do this instead.

<form onsubmit="ValidateLogin()">

Remove the onlclick from your submit button.

Answer 2

I also tried return false , but nothing seems to work here . It should not go to action method after preventDefault or return false statement

As kemicofa's answer points out, your ValidateLogin function expects an Event as a parameter. But you passed a this .

Let's inspect your code :

<input type="submit" value="LogIn" asp-action="Validate" asp-controller="LogIn" onclick="ValidateLogin(this)" />

Here the ValidateLogin(this) means you're telling the browser to pass this input DOM element to ValidateLogin() function as a parameter. As Input element has no preventDefault method, it fails.

Still i dont know why it is not working when i wrap it in a method instead of calling directly with .onclick()

In short, here the this references the DOM element which is the one that we attach the event handler to . Anyway, this is not a instance of Event .

If you prefer to binding event handler with the on{eventtype}="script_code" HTML attribute, you could use the event variable:

 
 
  
  
 
  onclick="ValidateLogin(this)"
 

 
 

    onclick="ValidateLogin(event)"

because the event could be treated as a pre-defined local variable for your script_code . For more details, see Registering on-event handlers

Both invoking by setting .onclick=function(event){/**/}; from JavaScript and invoking ValidateLogin(event) with a inline HTML attribute should work as expected.