Trying to prevent modal close on button click - javascript

Question

I'm working on a small project in ASP.NET MVC, and in one part I need help of javascript. Acctually there is modal with three inputs, old password, new and confirm new password, and in case all fields are empty I need to prevent user from closing modal, I tried to solve it like this:

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 
        })
      }
 }

But I get following error (check the image):

EDIT:

FULL CODE:

  <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>

}

So when someone clicks on password input, modal will be opened, and from that modal after informations are there user should click on button "NEXT" and there is event onclick which is calling comparePasswords method.

Answer 1

You are missing bootstrap library file.

Order of the file should be

<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/

Hope this will help you.