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

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>

}

因此，当有人点击密码输入时，模式将被打开，在信息出现后，用户应该从该模式中单击“下一步”按钮，并且有一个事件 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>

Same Problem (missing bootstrap.js) http://jsfiddle.net/1aeur58f/676/

Problem resolved (by adding bootstrap.js) http://jsfiddle.net/1aeur58f/677/

希望这对您有帮助。