Bootstrap Validation

Question

User-1499457942 posted

Hi

  How to use Bootstrap validation in Modal Popup . I have no Form tag . I am using Content Page. On Click of button Modal Popup opens

Thanks

Answer 1

User-893317190 posted

Hi  JagjitSingh,

 You could still use jquery validation through selecting the id of your master page’s form tag. You could write your jquery  validating  code  in the button’s click event.The button is used to add or edit data in your model pop up.

 Below is my code.  form1 is the id of the form tag in master page.

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">


      
  
    <asp:Button ID="Button1" runat="server" Text="Button" />
    
        <div class=""tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header bg-primary">
                    <button type="button" class="close" data-dismiss="modal">×</button>
                    <h4 class="modal-title " id="myModalLabel">Add New </h4>
                </div>
                <div class="modal-body">
                    <div class="form-horizontal" role="form">
                        <div class="form-group">
                            <asp:Label ID="lbl_Code" runat="server" CssClass="col-sm-4 control-label" Text="Code"></asp:Label>
                            <div class="col-sm-4">
                                <asp:TextBox ID="txt_Code" CssClass="form-control" runat="server"></asp:TextBox>

                            </div>
                        </div>
                        <div class="form-group">
                            <asp:Label ID="lbl_Inf" runat="server" CssClass="col-sm-4 control-label" Text="Inf"></asp:Label>
                            <div class="col-sm-5">
                                <asp:TextBox ID="txt_Inf"  CssClass="form-control" runat="server"></asp:TextBox>

                            </div>
                        </div>

                        <div class="form-group">
                            <div class="col-sm-4"></div>
                            <div class="col-sm-5">
                                <asp:Button ID="btnInsert" CssClass="btn btn-primary"  runat="server" class="btn btn-primary"  Text=" Save Record" onclick="btnInsert_Click"></asp:Button>
                            </div>
                        </div>
                    </div>
                </div>        
            </div>
        </div>
    </div>

         <script type="text/javascript" charset="utf-8">


             $("#<%=btnInsert.ClientID%>").click(function () {
                  $("#form1").validate({
                rules: {
                    <%=txt_Code.UniqueID %>: {
                        minlength: 2,
                        required: true
                    },
                    <%=txt_Inf.UniqueID %>: {                       
                         required: true
                     }
                }, messages: {}
            });




             })

    </script>

</asp:Content>

Best regards,

Ackerly Xu