locked
BootStrap Validation RRS feed

Answers

  • User1520731567 posted

    Hi JagjitSingh,

    I try to simplify your program by removing the modal popup,you could see the bootStrap validation works fine.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BootStrap Validation.aspx.cs" Inherits="Webform2.BootStrap_Validation" %>
    
    <head>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#form1').bootstrapValidator({
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        txt_Code: {
                            validators: {
                                notEmpty: {
                                    message: 'The ID is required and cannot be empty'
                                }
                            }
                        },
                        txt_Description: {
                            validators: {
                                notEmpty: {
                                    message: 'The email address is required and cannot be empty'
                                }
                            }
                        }
    
                    }
                });
            });
        </script>
    </head>
    
    <form id="form1" runat="server">
        <%--<div class="modal fade" id="myAddModal" 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">
            <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-5">
                    <asp:textbox id="txt_Code" cssclass="form-control" runat="server"></asp:textbox>
                </div>
            </div>
            <div class="form-group">
                <asp:label id="lbl_Description" runat="server" cssclass="col-sm-4 control-label" text="Description"></asp:label>
                <div class="col-sm-8">
                    <asp:textbox id="txt_Description" cssclass="form-control" runat="server"></asp:textbox>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4"></div>
                <div class="col-sm-4">
                    <asp:button id="btnInsert" cssclass="btn btn-primary" runat="server" class="btn btn-primary" validationgroup="One" text=" Save Record"></asp:button>
                </div>
            </div>
        </div>
        <%--                </div>        
                </div>
            </div>
        </div>--%>
    </form>

    How it works:

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 16, 2018 1:40 AM

All replies

  • User-1716253493 posted

    Try this

    <asp:textbox runat="server" ID="name" ClientIDMode="Predictable"></asp:textbox>

    Wednesday, August 15, 2018 1:12 AM
  • User-1320437544 posted

    Sure make your form and control IDs Static and then you can access them with jQuery and reproduce the logic of the example you mentioned.

    Remove any existing asp.net validators from the form if you have any.

    I hope it helps.

    Wednesday, August 15, 2018 1:33 AM
  • User-1499457942 posted

    Hi

      I am trying like this on Content Page but not working. Since there is no form tag on Content page how it can be done.

    <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $('#myAddModal').bootstrapValidator({
                    container: '#messages',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        txt_Code0: {
                            validators: {
                                notEmpty: {
                                    message: 'The ID is required and cannot be empty'
                                }
                            }
                        },
                        txt_Description0: {
                            validators: {
                                notEmpty: {
                                    message: 'The email address is required and cannot be empty'
                                },
                                emailAddress: {
                                    message: 'The email address is not valid'
                                }
                            }
                        }
                    }
                });
            });
        </script>
    
    <div class="modal fade" id="myAddModal" 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">
                            <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-5">
                                    <asp:TextBox ID="txt_Code" CssClass="form-control" runat="server"></asp:TextBox>
                                    <%--<asp:RequiredFieldValidator ID="rfv1" CssClass="text-danger" runat="server" ValidationGroup="One" ErrorMessage="This field is Required !" ControlToValidate="txt_Code"></asp:RequiredFieldValidator>--%>
                                </div>
                            </div>
                            <div class="form-group">
                                <asp:Label ID="lbl_Description" runat="server" CssClass="col-sm-4 control-label" Text="Description"></asp:Label>
                                <div class="col-sm-8">
                                    <asp:TextBox ID="txt_Description"  CssClass="form-control" runat="server"></asp:TextBox>
    <%--                                <asp:RequiredFieldValidator ID="rfv2" CssClass="text-danger" runat="server" ValidationGroup="One" ErrorMessage="This field is Required !" ControlToValidate="txt_Description"></asp:RequiredFieldValidator>--%>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-4"></div>
                                <div class="col-sm-4">
                                    <asp:Button ID="btnInsert" CssClass="btn btn-primary"  runat="server" class="btn btn-primary" ValidationGroup="One" Text=" Save Record" OnClick="InsertData" ></asp:Button>
                                </div>
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
        </div>

    Thanks

    Wednesday, August 15, 2018 5:42 AM
  • User-1716253493 posted

    AFAIK you can use div class="form" or <form> without runat="server"

    Wednesday, August 15, 2018 6:44 AM
  • User1520731567 posted

    Hi JagjitSingh,

    I suggest you could set the same ID value of fields in bootstrapValidator.

    I make a demo according to your code,you could refer to it:

    <script type="text/javascript">
         $(document).ready(function () {
                $('#form1').bootstrapValidator({
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        txt_Code: {
                            validators: {
                                notEmpty: {
                                    message: 'The ID is required and cannot be empty'
                                }
                            }
                        },
                        txt_Description: {
                            validators: {
                                notEmpty: {
                                    message: 'The email address is required and cannot be empty'
                                }
                            }
                        }
          
                    }
                });
            });
        </script>
        </head>
    
    <form id="form1" runat="server">
    <div class="modal fade" id="myAddModal" 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">
                            <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-5">
                                    <asp:TextBox ID="txt_Code" CssClass="form-control" runat="server"></asp:TextBox>
                                </div>
                            </div>
                            <div class="form-group">
                                <asp:Label ID="lbl_Description" runat="server" CssClass="col-sm-4 control-label" Text="Description"></asp:Label>
                                <div class="col-sm-8">
                                    <asp:TextBox ID="txt_Description"  CssClass="form-control" runat="server"></asp:TextBox>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-4"></div>
                                <div class="col-sm-4">
                                    <asp:Button ID="btnInsert" CssClass="btn btn-primary"  runat="server" class="btn btn-primary" ValidationGroup="One" Text=" Save Record" ></asp:Button>
                                </div>
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
        </div>
        </form>

    Best Regards.

    Yuki Tao

    Wednesday, August 15, 2018 9:32 AM
  • User-1499457942 posted

    Hi

      I have written below code but not working

    <div class="form">
        <div class="modal fade" id="myAddModal" 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">
                            <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-5">
                                    <asp:TextBox ID="txt_Code" CssClass="form-control" runat="server"></asp:TextBox>
    <%--                                <asp:RequiredFieldValidator ID="rfv1" CssClass="text-danger" runat="server" ValidationGroup="One" ErrorMessage="This field is Required !" ControlToValidate="txt_Code"></asp:RequiredFieldValidator>--%>
                                </div>
                            </div>
                            <div class="form-group">
                                <asp:Label ID="lbl_Description" runat="server" CssClass="col-sm-4 control-label" Text="Description"></asp:Label>
                                <div class="col-sm-8">
                                    <asp:TextBox ID="txt_Description"  CssClass="form-control" runat="server"></asp:TextBox>
    <%--                                <asp:RequiredFieldValidator ID="rfv2" CssClass="text-danger" runat="server" ValidationGroup="One" ErrorMessage="This field is Required !" ControlToValidate="txt_Description"></asp:RequiredFieldValidator>
                                    <asp:RegularExpressionValidator ID="rev1" runat="server" ControlToValidate="txt_Description" ValidationExpression="^[a-zA-Z\s]*$" ErrorMessage="*Valid characters: Alphabets and space." />--%>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-sm-4"></div>
                                <div class="col-sm-4">
                                    <asp:Button ID="btnInsert" CssClass="btn btn-primary"  runat="server" class="btn btn-primary" ValidationGroup="One" Text=" Save Record" OnClick="InsertData" ></asp:Button>
                                </div>
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
        </div>
        </div>



    $(document).ready(function () {
               
     
                $('.form').bootstrapValidator({
                    container: '#messages',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        txt_Code: {
                            validators: {
                                notEmpty: {
                                    message: 'The ID is required and cannot be empty'
                                }
                            }
                        },
                        txt_Description: {
                            validators: {
                                notEmpty: {
                                    message: 'The email address is required and cannot be empty'
                                },
                                emailAddress: {
                                    message: 'The email address is not valid'
                                }
                            }
                        }
                    }
                });
            });
    </script>

    Thanks

    Wednesday, August 15, 2018 3:09 PM
  • User1520731567 posted

    Hi JagjitSingh,

    I try to simplify your program by removing the modal popup,you could see the bootStrap validation works fine.

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="BootStrap Validation.aspx.cs" Inherits="Webform2.BootStrap_Validation" %>
    
    <head>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
        <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
        <script type="text/javascript" src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('#form1').bootstrapValidator({
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        txt_Code: {
                            validators: {
                                notEmpty: {
                                    message: 'The ID is required and cannot be empty'
                                }
                            }
                        },
                        txt_Description: {
                            validators: {
                                notEmpty: {
                                    message: 'The email address is required and cannot be empty'
                                }
                            }
                        }
    
                    }
                });
            });
        </script>
    </head>
    
    <form id="form1" runat="server">
        <%--<div class="modal fade" id="myAddModal" 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">
            <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-5">
                    <asp:textbox id="txt_Code" cssclass="form-control" runat="server"></asp:textbox>
                </div>
            </div>
            <div class="form-group">
                <asp:label id="lbl_Description" runat="server" cssclass="col-sm-4 control-label" text="Description"></asp:label>
                <div class="col-sm-8">
                    <asp:textbox id="txt_Description" cssclass="form-control" runat="server"></asp:textbox>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-4"></div>
                <div class="col-sm-4">
                    <asp:button id="btnInsert" cssclass="btn btn-primary" runat="server" class="btn btn-primary" validationgroup="One" text=" Save Record"></asp:button>
                </div>
            </div>
        </div>
        <%--                </div>        
                </div>
            </div>
        </div>--%>
    </form>

    How it works:

    Best Regards.

    Yuki Tao

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 16, 2018 1:40 AM
  • User-1499457942 posted

    Hi 

      I have content page in which i am opening Modal Popup. In Content page i have no Form tag.

    Thanks

    Thursday, August 16, 2018 3:05 PM
  • User-1492487179 posted

    Hi 

      I have content page in which i am opening Modal Popup. In Content page i have no Form tag.

    Thanks

    Hello JagjitSingh,

    bootstrapValidator is just for the FORM tag. if you don't set the the selector as form tag, you didn't use this JQuery Library. Base my experience you can remove the Form tag form master page. You could add the form tag on your content page, like this:

    <body>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>   
       
    </body>

    and you can use the Form Tag on your content page, like this:

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
       <form id="securePasswordForm" class="form-horizontal">
        <div class="form-group">
            <label class="col-sm-3 control-label">Password</label>
            <div class="col-sm-5">
                <input type="password" class="form-control" name="pwd" />
            </div>
        </div>
    
        <div class="form-group">
            <div class="col-sm-5 col-sm-offset-3">
                <button type="submit" class="btn btn-default">Validate</button>
            </div>
        </div>
    </form>
        <button class="btn btn-default" data-toggle="modal" data-target="#loginModal">Login</button>
    
    <div class="modal fade" id="loginModal" 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">Login</h4>
                </div>
    
                <div class="modal-body">
                    <!-- The form is placed inside the body of modal -->
                    <form id="loginForm" method="post" class="form-horizontal">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Username</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" name="username" />
                            </div>
                        </div>
    
                        <div class="form-group">
                            <label class="col-sm-3 control-label">Password</label>
                            <div class="col-sm-5">
                                <input type="password" class="form-control" name="password" />
                            </div>
                        </div>
    
                        <div class="form-group">
                            <div class="col-sm-5 col-sm-offset-3">
                                <button type="submit" class="btn btn-default">Login</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    </asp:Content>

    Also, you can refer to other members' reply and change the control as server control. 

    Regards,

    Tuesday, August 28, 2018 1:43 AM