嘗試防止按鈕單擊時的模式關閉-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>

}

因此，當某人單擊密碼輸入時，將打開模態，並且在信息出現后，從該模態中，用戶應單擊按鈕“ NEXT”，並且有事件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/

希望這會幫助你。