JQuery阻止post动作MVC

时间:2017-12-19 00:33:58

标签: javascript jquery html asp.net-mvc

我正在使用CodePen中的这个jQuery https://codepen.io/dicson/pen/eJzoEX&它工作得很好但是它以某种方式阻止FormMethod.Post动作被解雇。我对JS / JQuery不是很有经验,所以希望有人可以提供帮助。

FORM

 @using (Html.BeginForm("Login", "Authentication", FormMethod.Post, new { role = "form" }))
            {
                @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <form class="form">
                    <div class="f_row">
                        <label>Username</label>
                        @Html.TextBoxFor(m => m.Email, new { @name = "username", @type = "username", @class = "input-field", @required = "" })
                        @Html.ValidationMessageFor(m => m.Email, "", new { @class = "text-danger" })
                        <u></u>
                    </div>
                    <div class="f_row last">
                        <label>Password</label>
                        @Html.PasswordFor(m => m.Password, new { @name = "pass", @type = "password", @class = "input-field", @required = "" })
                        @Html.ValidationMessageFor(m => m.Password, "", new { @class = "text-danger" })
                        <u></u>
                    </div>

                    <div class="form-group">
                        <input type="submit" value="GO" class="btn btn-default submit-btn input-field" />
                    </div>

                </form>
            }

JQUERY

    var inP = $('.input-field');

inP.on('blur', function () {
    if (!this.value) {
        $(this).parent('.f_row').removeClass('focus');
    } else {
        $(this).parent('.f_row').addClass('focus');
    }
}).on('focus', function () {
        $(this).parent('.f_row').addClass('focus');
    $('.btn').removeClass('active');
    $('.f_row').removeClass('shake');
});

$('.resetTag').click(function(e){
        e.preventDefault();
    $('.formBox').addClass('level-forget').removeClass('level-reg');
});

$('.back').click(function(e){
        e.preventDefault();
    $('.formBox').removeClass('level-forget').addClass('level-login');
});

$('.regTag').click(function(e){
        e.preventDefault();
    $('.formBox').removeClass('level-reg-revers');
    $('.formBox').toggleClass('level-login').toggleClass('level-reg');
    if(!$('.formBox').hasClass('level-reg')) {
        $('.formBox').addClass('level-reg-revers');
    }
});

$('.btn').each(function() {
        $(this).on('click', function (e) {
            e.preventDefault();

            var finp = $(this).parent('form').find('input');

            console.log(finp.html());

            if (!finp.val() == 0) {
                $(this).addClass('active');
            }

            setTimeout(function () {

                inP.val('');

                $('.f_row').removeClass('shake focus');
                $('.btn').removeClass('active');

            }, 2000);

            if (inP.val() == 0) {
                inP.parent('.f_row').addClass('shake');
            }

            //inP.val('');
            //$('.f_row').removeClass('focus');

        });
    });

如果我不加载jquery,表单工作正常。

运行jquery时,我在控制台上获得了一个未定义的日志

0 个答案:

没有答案