locked
BootStrap validation RRS feed

  • Question

  • User-1499457942 posted

    Hi

      I have below code  I want that message should appear in front of textbox not below.

    Secondly in below line at : it displays message - Expected identifier , string or number.

    <%=txt_Code.UniqueID%> :

    $('[id*=frmMain]').bootstrapValidator({
                    container: '#messages',
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                        <%=txt_Code.UniqueID%> : {
                            validators: {
                                notEmpty: {
                                    message: 'Code is required and cannot be empty!'
                                }
                            }
                        },
                        <%=txt_Description.UniqueID%> : {
                            validators: {
                                notEmpty: {
                                    message: 'Description is required and cannot Be empty!'
                                }
                            }
                        }
                    }
                });

    Thanks

    Wednesday, August 22, 2018 12:39 PM

Answers

  • User-893317190 posted

    Hi JagjitSingh ,

    You could use container property  for each field. The "#" refers to id selector. Below is my code.

     <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
    
                    
                
                $('#frmModal').bootstrapValidator({
                   container: "#messages",
                    feedbackIcons: {
                        valid: 'glyphicon glyphicon-ok',
                        invalid: 'glyphicon glyphicon-remove',
                        validating: 'glyphicon glyphicon-refresh'
                    },
                    fields: {
                         <%=txt_Code.UniqueID%>: {
                         container: "#code",
                            validators: {
                                notEmpty: {
                                    message: 'The ID is required and cannot be empty'
                                }
                            }
                        },
                        <%=txt_Description.UniqueID%>: {
                             container: "#description",
                            validators: {
                               
                                notEmpty: {
                                    message: 'Description cannot be empty',
                                }
                            }
                        }
    
                    }
                }) 
    
          
            
            });
    
            
                
            
        </script>
    
    
    
        <button type="button" id="btnAdd" class="btn btn-primary" data-toggle="modal" data-target="#myAddModal">Add New</button><br /><br />
    
      
        <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" role="form">
                            
                            <div class="form-group">
                               <div id="code"  style="margin-left:15%"  ></div>
                                <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">
                               <div id="description" style="margin-left:15%" ></div>
                                <asp:Label ID="lbl_Description" runat="server" CssClass="col-sm-4 control-label" Text="Inflator"></asp:Label>
                                <div class="col-sm-5">
                                    
                                    <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-5">
                                    <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>
    
    

    The result.

    As to your second question , I have tried your code , but I haven't meet your problem. Could you post more of your code that may result in the problem?

    Best regards,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Thursday, August 23, 2018 6:41 AM