mimtiyaz Ответов: 1

Событие нажатия кнопки не срабатывает в модальном окне bootstrap при применении проверки.


Привет

Событие нажатия кнопки не срабатывает внутри модального окна bootstrap, когда я применяю проверку внутри модального окна. Если я удалю проверку начальной загрузки, то сработает событие нажатия кнопки.

Любой, кто попытается это исправить.

Спасибо,
Имтияз

Что я уже пробовал:

<div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2">
                    <!-- Trigger the modal with a button -->
                    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
                    
                    <!-- Modal -->
                    <div class="modal fade" id="myModal" role="dialog">
                        <div class="modal-dialog">

                            <!-- Modal content-->
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">×</button>
                                    <h4 class="modal-title">Modal Header</h4>
                                </div>
                                <div class="modal-body">
                                    <div class="form-group">
                                <label class="col-md-4 control-label">Password </label>
                                <div class="col-md-6">
                                    <asp:TextBox ID="txtPassword" runat="server" class="form-control"></asp:TextBox>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-4 control-label">Confirm Password </label>
                                <div class="col-md-6">
                                    <asp:TextBox ID="txtConfirmPassword" runat="server" class="form-control"></asp:TextBox>
                                </div>
                            </div>
                                </div>
                                <div class="modal-footer">
                                    <asp:Button ID="Button2" runat="server" CssClass="btn btn-primary" OnClick="Button2_Click" Text="Submit"></asp:Button>
                                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                </div>
                            </div>

                        </div>
                    </div>                   
                    
                    <div class="form-group">
                        <label class="col-md-4 control-label">First Name </label>
                        <div class="col-md-6">
                            <asp:TextBox ID="txtFirstName" runat="server" class="form-control"></asp:TextBox>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label">Last Name </label>
                        <div class="col-md-6">
                            <asp:TextBox ID="txtLastName" runat="server" class="form-control"></asp:TextBox>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="col-md-4 control-label">Email </label>
                        <div class="col-md-6">
                            <asp:TextBox ID="txtEmail" runat="server" class="form-control"></asp:TextBox>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <asp:Button ID="Button1" runat="server" CssClass="btn btn-primary" Text="Submit" OnClick="Button1_Click"></asp:Button>
                    </div>

                </div>
            </div>
        </div>





<script type="text/javascript">
            $("#Button1").click(function () {
                $('#form1').bootstrapValidator({
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        txtFirstName: {
                            validators: {
                                notEmpty: {
                                    message: 'First name is required'
                                }
                            }
                        },
                        txtLastName: {
                            validators: {
                                notEmpty: {
                                    message: 'Last name is required'
                                }
                            }
                        },
                        txtEmail: {
                            validators: {
                                notEmpty: {
                                    message: 'First name is required'
                                },
                                emailAddress: {
                                    message: 'Please provide a valid email address'
                                }
                            }
                        }
                    }
                })
            });

            $("#Button2").click(function () {
                $('#form1').bootstrapValidator({
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        txtPassword: {
                            validators: {
                                notEmpty: {
                                    message: 'Password is required'
                                }
                            }
                        },
                        txtConfirmPassword: {
                            validators: {
                                notEmpty: {
                                    message: 'Confirm password is required'
                                }
                            }
                        }
                    }
                });
            });
        </script>

1 Ответов

Рейтинг:
1

Graeme_Grant

Вам нужно завернуть <asp:Button /> внутри а <form ...> ... </form> для того, чтобы произошел обратный отсчет.

Примечание: только один <form ...> ... </form> Пер Asp.Net страница поддерживается. MVC не имеет этого ограничения.

Чтобы обойти это ограничение, вам нужно будет использовать javascript/jquery/etc...

[edit:] после быстрого поиска в Google я нашел возможное решение,которое вы могли бы попробовать.

поиск Google: asp.net несколько форм на одной странице[^]

возможное решение: Аккуратный ASP.NET трюк: несколько форм на странице | блог Кирка Эванса[^]


mimtiyaz

Спасибо за ваше предложение.

Я использую тег формы на главной странице, который является общим для всех ее дочерних страниц. В этом случае будет ли эта концепция рекомендована?

Graeme_Grant

Я использую MVC (не Asp.Net) где это не проблема. Страница в MVC не привязана к определенному коду, например Asp.Net.

Прочтите последнюю ссылку, которую я предоставил для обходного пути.

mimtiyaz

Спасибо..

mimtiyaz

И более того, событие нажатия кнопки работает нормально, если мы не применяем какую-либо проверку начальной загрузки. Когда применяется проверка начальной загрузки, событие Button2 click указывает на событие Button1_Click. Вероятно, мне нужно настроить javascript.