如何通过验证启动Bootstrap Modal?

时间:2014-01-26 08:34:45

标签: asp.net-mvc validation twitter-bootstrap bootstrap-modal

我有一个登录模式,这是一个局部视图,然后我可以弹出窗口供用户随时登录。它是它的样子。

@model LeduInfo.Models.LoginModel




     <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel"> Login </h4>
                    </div>
                    <div class="container">
                          <div class="modal-body">
                        @using (Html.BeginForm("Login", "Account", FormMethod.Post, new { @id="signinForm"}))
                        {
                        @Html.ValidationSummary(true, "Account creation was unsuccessful. Please correct the errors and try again.")

                            <div class="control-group">
                                <label class="control-label" for="inputEmail">User Name</label>
                                <div class="controls">
                                    @Html.TextBoxFor(m => m.UserName, new { @name = "inputUser", @class = "form-control", @id = "inputUser", @placeholder = "User Name" })
                                    @Html.ValidationMessageFor(m=>m.UserName)
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="inputPassword">Password</label>
                                <div class="controls">
                                    @Html.TextBoxFor(m => m.Password, new { @name = "inputPassword", @class = "form-control", @id = "inputPassword", @placeholder = "Password", @type = "password" })   
                                    @Html.ValidationMessageFor(m=>m.Password)
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <label class="checkbox">
                                       Remember me @Html.CheckBoxFor(m => m.RememberMe)
                                        <span class="span9">  @Html.ActionLink("Register", "Register", "Account")   </span>

                                    </label>

                                     <button type="button" id="submit_btn" class="btn btn-primary" >sign in</button>
                                </div>
                            </div>
                        } 


                    </div>
                    </div>


                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal-dialog -->
        </div>

但是现在,我知道它将在点击登录按钮和窗口关闭时提交表单,这不是我想要的,然后我添加如下的jquery代码来手动提交表单。但如果在这种情况下,那么我无法从服务器返回信息进行验证,如何使用提交表单修复它但不是关闭模式?

<script type="text/javascript">
    // Setup form validation on the #register-form element
    $('#submit_btn').click(function () {
        var form = $('#singinForm');
        $("#signinForm").validate({

            // Specify the validation rules
            rules: {
                inputUser: "required",
                password: {
                    required: true,
                    minlength: 6
                }
            },


            // Specify the validation error messages
            messages: {
                inputUser: "Please enter your first name",
                password: {
                    required: "Please provide a password",
                    minlength: "Your password must be at least {0} characters long"
                },
            },

            submitHandler: function (form) {

                form.submit();
                $('#signinForm').find("#submit_btn").attr("disabled", true).attr("value", "Submitting...");
            }
        });



        }
    });

0 个答案:

没有答案