e.preventDefault () не работает для кнопки отправки и тега привязки в MVC

Question

В моем приложении ASP.Net Core MVC

Просмотр

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

Код машинописного текста

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

Если поля пусты, чем это должно завершить запрос, но он только отображает предупреждение и e, предотвращение дефолта () здесь неэффективно.

Я также пытался вернуть false, но, похоже, здесь ничего не работает.Он не должен переходить к методу действия после warnDefault или возвращать ложное утверждение

Может кто-нибудь сказать мне, что мне здесь не хватает в этой очень простой задаче?

Обновление 1

Если я изменил код ниже, чем он работает,

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;
}

}

Тем не менее, я не знаю, почему он не работает, когда я оборачиваю его в метод вместовызов напрямую с помощью .onclick ()

Answer 1

Я также пытался вернуть false, но, похоже, здесь ничего не работает.Он не должен переходить к методу действия после warnDefault или возвращать ложное утверждение

Как указывает kemicofa , ваша ValidateLogin функция ожидает Event в качестве параметра.Но вы передали this.

Давайте проверим ваш код:

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

Здесь ValidateLogin(this) означает, что вы говорите браузеру передать этот элемент input DOM ValidateLogin() функция как параметр.Поскольку элемент Input не имеет метода preventDefault, он завершается ошибкой.

Тем не менее, я не знаю, почему он не работает, когда я заключаю его в метод вместо вызова напрямую с помощью .onclick()

Короче, здесь this ссылается на элемент DOM, к которому мы прикрепляем обработчик события к .В любом случае, this не является экземпляром Event.

Если вы предпочитаете связывать обработчик событий с атрибутом on{eventtype}="script_code" HTML, вы можете использовать переменную event:

    <strike>onclick="ValidateLogin(this)"</strike>

    onclick="ValidateLogin(event)"

, поскольку event может рассматриваться как предопределенная локальная переменная для вашего script_code.Для получения дополнительной информации см. Регистрация обработчиков по событию

Оба вызова, установив .onclick=function(event){/**/}; из JavaScript и вызов ValidateLogin(event) со встроенным атрибутом HTML, должны работать как положено.

Answer 2

onclick="ValidateLogin(this)"

Ваша проблема - ваш метод ValidateLogin.Вы передаете контекст «this», и ваш метод ожидает параметр события.

Сделайте это вместо этого.

<form onsubmit="ValidateLogin()">

Удалите onlclick из вашей кнопки отправки.