Question

我正在使用ASP.NET MVC中的一个小项目，在一部分我需要javascript的帮助。实际上有三个输入的模态，旧密码，新密码和确认新密码，如果所有字段都是空的，我需要阻止用户关闭模态，我试着像这样解决它：

function comparePasswords(currentPassword) {

//Here I will loop throught all of my three inputs to check are they empty

var formInvalid = false;
    $('#allInputs input').each(function () {
        if ($(this).val() === '') {
                formInvalid = true;
        }
    });

    if (formInvalid) {
        alert('One or more fields are empty.');
        $('#ChangePassword').modal({
         backdrop: 'static',
         keyboard: false  // I need to prevent user from clicking ESC or something 
        })
      }
 }

但我得到以下错误（查看图片）：

修改

完整代码：

  <div class="form-group">
                <label for="UserPassword">Pw:</label>
                    @Html.TextBoxFor(model => model.PasswordHash, new { @class = "form-control custom-input", data_toggle = "modal", data_target = "#ChangePassword", ariaDescribedby = "basic-addon1" })
                </div>


                @*Modal for ChangePassword which is opening when user clicks on control above ^*@
                <div id="ChangePassword" class="modal fade" role="dialog">
                    <div class="modal-dialog modal-sm">

                        <!-- Modal content-->
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal">&times;</button>
                                <h4 class="modal-title">Updating password</h4>
                            </div>
                            <div class="modal-body" id="allInputs">

                                @*Modal Old Password*@
                                <div class="form-group">
                                    <label for="UserPassword">Old password:</label>
                                    <input type="password" class="form-control custom-input modal-trigger" value="Eldin123" name="oldPassword" id="OldPassword" data-toggle="modal">
                                </div>

                                @*Modal New Password*@
                                <div class="form-group">
                                    <label for="UserPassword">New password:</label>
                                    <input type="password" class="form-control custom-input modal-trigger" value="" name="newPassword" id="NewPassword" data-toggle="modal">
                                </div>

                                @*Modal Repeat New Password*@
                                <div class="form-group">
                                    <label for="UserPassword">Confirm new password:</label>
                                    <input type="password" class="form-control custom-input modal-trigger" value="" name="confirmPassword" id="ConfirmNewPassword" data-toggle="modal">
                                </div>


                                @*Modal - submit*@
                                <div class="confirm-login">
                                    <button type="button" class="btn custom-btn-big" onclick="comparePasswords();">NEXT</button>
                                </div>

                            </div>
                        </div>

                    </div>
                </div>@*end of Modal for ChangePassword*@

                @*Confirm button*@
                <div class="confirm-login">
                    <button class="btn custom-btn-big" data-target="#">SAVE ALL CHANGES</button>
                </div>

            </div>

        </div>

    </div> @*End of User / Administration*@
}

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")

    <script>


            function fieldInvalid() {
                var formInvalid = false;
                $('#allInputs input').each(function () {
                    if ($(this).val() === '') {
                        formInvalid = true;
                        console.log(formInvalid);
                    }
                });
            }

            function passwordsInvalid() {
                var invalidPassword = true;
                var oldPw = $("#OldPassword").val();
                var newPw = $("#NewPassword").val();
                var confirmNewPw = $("#ConfirmNewPassword").val();
                if (oldPw != newPw) {
                    alert('Postojeći password nije ispravan.');
                }
                else if (oldPw != confirmNewPw) {
                    alert('Password koji ste unijeli se ne slaže.');
                }
                else {

                    invalidPassword = false;
                }

                return invalidPassword;
            }

            var comparePasswords = function () {
                if (fieldInvalid()) {
                    alert('One or more fields is empty.');
                }
                else {
                    if (!passwordsInvalid()) {
                        $("#ChangePassword").modal('hide');
                    }
                }
            }


    </script>

}

因此，当有人点击密码输入时，将打开模态，并且在信息出现之后，用户应该点击按钮＆＃34; NEXT＆＃34;并且有一个事件onclick正在调用comparePasswords方法。

Answer 1

您缺少bootstrap库文件。

文件的顺序应为

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

相同问题（缺少bootstrap.js）http://jsfiddle.net/1aeur58f/676/

问题已解决（通过添加bootstrap.js）http://jsfiddle.net/1aeur58f/677/

希望这会对你有所帮助。

尝试阻止按钮点击时模式关闭 - javascript

1 个答案: