Click here to Skip to main content
15,893,622 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Hello

Button click event is not firing inside the bootstrap modal window when I apply validation inside the modal window. If I remove the bootstrap validation, the button click event is firing.

Anyone try to fix it.

Thanks,
Imtiyaz

What I have tried:

<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>
Posted
Updated 4-Mar-17 13:54pm

1 solution

You need to wrap the <asp:Button /> inside a <form ...> ... </form> for the post-back to occur.

Note: Only one <form ...> ... </form> per Asp.Net page is supported. MVC does not have this restriction.

To get around this restriction you will need to use javascript/jquery/etc...

[edit:] after a quick bit of Googling, I found a possible solution that you could try.

Google Search: asp.net multiple forms on one page[^]

Possible Solution: Neat ASP.NET Trick: Multiple Forms on a Page | Kirk Evans Blog[^]
 
Share this answer
 
v2
Comments
mimtiyaz 5-Mar-17 0:06am    
Thanks for your suggestion.

I've been using a form tag in master page which is common for all its child page. In this scenario will this concept be recommendable?
Graeme_Grant 5-Mar-17 0:14am    
I use MVC (not Asp.Net) where this is not a problem. The page in MVC is not bound to a specific code-behind like Asp.Net.

Have a read of the last link that I provided for a workaround.
mimtiyaz 5-Mar-17 0:16am    
Thanks..
mimtiyaz 5-Mar-17 0:13am    
And moreover, the button click event is working fine unless we apply any bootstrap validation. When the bootstrap validation is applied the Button2 click event is pointing to Button1_Click event. Probably I need to customize javascript.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900