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()