Как запустить сообщение проверки при нажатии кнопки вместо кнопки «Отправить»

Question

Я должен выполнить процесс аутентификации с использованием JQuery. У меня есть два текстовых поля UserName и Password и две кнопки - Login и Submit.

Если я нажимаю кнопку «Отправить», автоматически запускается такая хорошая проверка, и эту функциональность я должен реализовать при нажатии кнопки «Вход».

Итак, как я могу добиться автоматической проверки при нажатии кнопки?

Почему я хотел бы это:

1. Usin JQuery отправляет запрос на сервер с именем пользователя и Пароль в течение этого времени я буду отображать Обработка ....
2. Затем он проверит указанное значение в базе данных и ответит с успехом или неудачей, тогда я покажу либо успех, либо неудачу.

Вот фрагмент кода:

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
@Html.ValidationSummary(true, "Login was unsuccessful. Please correct the errors and try again.")
@using (Html.BeginForm(null, null, FormMethod.Get, new { id = "Form1", name = "Form1" }))
{
    <table>
        <tr>
            <td>
                User Name
            </td>
            <td>@Html.TextBoxFor(u => u.UserName, new { id = "txtUser" }) @Html.ValidationMessageFor(u => u.UserName)
            </td>
        </tr>
        <tr>
            <td>
                Password
            </td>
            <td>@Html.TextBoxFor(u => u.Password, new { id = "txtPassword" })  @Html.ValidationMessageFor(u => u.Password)
            </td>
        </tr>
        <tr>
            <td>
            </td>
            <td>
                <input type="button" value="Login" onclick="checkAuthentication();" />
                <input type="submit" value="Submit" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <div id="dvStatus" class="loginMessageStatus">
                </div>
            </td>
        </tr>
    </table>
}
<script language="javascript" type="text/javascript">
    function getUserCredentials() {
        var user = jQuery('#txtUserName').val();
        var pass = jQuery('#txtPassword').val();
        return { UserName: user, Password: pass };
    }
    function clearUserCredentials() {
        jQuery('#txtUserName').val("");
        jQuery('#txtPassword').val("");
        jQuery('#txtUserName').focus();
    }
    function checkAuthentication() {
            jQuery('#dvStatus').html("<div class='requestProcess'></div><div class='requestMessage'>Please wait...</div>")
            var postData = getUserCredentials();
            var ajaxResponse = $.ajax({
                type: "post",
                url: '@Url.Action("Index", "Login")',
                dataType: 'json',
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(postData),
                success: function (result) {
                    var res = jQuery.parseJSON(result);
                    if (res.Success == true) {
                        jQuery('#dvStatus').html("<div class='requestSuccess'></div><div class='requestMessage'>Your are successfully logged in. Redirecting...</div>")
                        jQuery.doTimeout(100, redirectToPage);
                    }
                    else {
                        jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>Error: " + res.Message + ". <a href='javascript:void(0)' onclick='clearUserCredentials()'>Try Again</a></div>")
                    }
                }
            });
    }
    function redirectToPage() {
        href = '@Url.Action("Index", "TabMaster")';
        window.location.href = href;
    }

Примечание: -

1. Проверка полностью работает с кнопкой Отправить
2. Процесс проверки полностью работает с кнопкой входа в систему (, просто мне нужно интегрировать проверку с кнопкой входа в систему )

Answer 1

вы можете выполнить валидацию, нажав кнопку отправки с помощью следующего обработчика событий:

Добавить идентификатор для кнопки:

<input id="SubmitButton" type="submit" value="Submit" />

JavaScript:

$(document).ready(function(){
    $("#SubmitButton").click(function(){
         return checkAuthentication();
    });
});

Измените метод проверки, чтобы он возвращался независимо от того, провалился он или нет:

function checkAuthentication() {
    var _user = jQuery.trim(jQuery('#txtUserName').val());
    var _pass = jQuery.trim(jQuery('#txtPassword').val());
    if (_user.length == 0 || _pass.length == 0) {
        jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>User Name and Password are required!</div>")
        return false;
    }
    else {
        jQuery('#dvStatus').html("<div class='requestProcess'></div><div class='requestMessage'>Please wait...</div>")
        var postData = getUserCredentials();
        var ajaxResponse = $.ajax({
            type: "post",
            url: '@Url.Action("Index", "Login")',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(postData),
            success: function (result) {
                var res = jQuery.parseJSON(result);
                if (res.Success == true) {
                    jQuery('#dvStatus').html("<div class='requestSuccess'></div><div class='requestMessage'>Your are successfully logged in. Redirecting...</div>")
                    jQuery.doTimeout(100, redirectToPage);
                }
                else {
                    jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>Error: " + res.Message + ". <a href='javascript:void(0)' onclick='clearUserCredentials()'>Try Again</a></div>")
                }
            }
        });
        return true;
    }
}

Это должно затем остановить отправку, если проверка не удалась.

Answer 2

Я решил это: Я использовал только кнопку отправки

<input id="btnLogin" type="submit" value="Login" />

Ниже приведен обновленный код

<script language="javascript" type="text/javascript">
    $(document).ready(function () {
        //$.preloadCssImages();
        $("#btnLogin").click(function () {
            if ($("#Form1").valid() == true) {
                checkAuthentication();
                return false;
            }
        });
    });
    function getUserCredentials() {
        var user = jQuery('#txtUserName').val();
        var pass = jQuery('#txtPassword').val();
        return { UserName: user, Password: pass };
    }
    function clearUserCredentials() {
        jQuery('#txtUserName').val("");
        jQuery('#txtPassword').val("");
        jQuery('#txtUserName').focus();
    }
    function checkAuthentication() {
        jQuery('#dvStatus').html("<div class='requestProcess'></div><div class='requestMessage'>Please wait...</div>")
        var postData = getUserCredentials();
        var ajaxResponse = $.ajax({
            type: "post",
            url: '@Url.Action("Index", "Login")',
            dataType: 'json',
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify(postData),
            success: function (result) {
                var res = jQuery.parseJSON(result);
                if (res.Success == true) {
                    jQuery('#dvStatus').html("<div class='requestSuccess'></div><div class='requestMessage'>Your are successfully logged in. Redirecting...</div>")
                    jQuery.doTimeout(100, redirectToPage);
                }
                else {
                    jQuery('#dvStatus').html("<div class='requestFailed'></div><div class='requestMessage'>Error: " + res.Message + ". <a href='javascript:void(0)' onclick='clearUserCredentials()'>Try Again</a></div>")
                }
            }
        });
    }
    function redirectToPage() {
        href = '@Url.Action("Index", "TabMaster")';
        window.location.href = href;
    }
</script>