locked
Jquery Validation Not Working RRS feed

  • Question

  • User-1499457942 posted

    Hi

      I am trying like this but not working

    <asp:Content ID="Content1" ContentPlaceHolderID="HeadContentPlaceHolder" runat="server">
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $('#gvwInf').dataTable({
                    order: []
                });
    
                $("#aspnetForm").validate({
                    rules: {
                        <%=txt_Code.UniqueID %>: {
                            minlength: 2,
                            required: true
                        },
                        <%=txt_Inf.UniqueID %>: {                       
                             required: true
                         }
                    }, messages: {}
                });
            });
        </script>
    
    </asp:Content>
    
    
    <asp:Content ID="Content2" ContentPlaceHolderID="MainContentPlaceHolder" runat="server">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myAddModal">Add New</button><br /><br />
        <div class="row">  
            <div class="col-lg-12 "> 
                <div class="table-responsive">
                    <asp:GridView ID="gvwInflator OnPreRender="gvwInf_PreRender" runat="server" DataKeyNames="Code"
                    CssClass="table table-bordered table-striped" AutoGenerateColumns="false" OnRowCommand="gvwInf_RowCommand"
    
                    EmptyDataText="No Records Found!" EmptyDataRowStyle-ForeColor="Red" EmptyDataRowStyle-CssClass ="gvEmpty" >
                    <HeaderStyle ForeColor="White" Font-Bold="True" BackColor="#428bca"></HeaderStyle>
                    <Columns>
                        <asp:TemplateField HeaderText="Code">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="lblCode" Text='<%#Eval("Code") %>'></asp:Label>
    
                            </ItemTemplate>
                        </asp:TemplateField>
                        <asp:TemplateField HeaderText="Inf">
                            <ItemTemplate>
                                <asp:Label runat="server" ID="lblInf" Text='<%#Eval("Inf") %>'></asp:Label>
                            </ItemTemplate>
                        </asp:TemplateField>
    
                        <asp:TemplateField HeaderText="Action">
                            <ItemTemplate>
                                <asp:linkbutton id="btnEdit"  ToolTip="Update Record" CommandName="EditRow" runat="server" CssClass="clslnkbutton"/> 
                            </ItemTemplate>
                        </asp:TemplateField>
                    </Columns>
                    </asp:GridView>
                </div>
            </div>
        </div>
    
        <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">
                                <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" ValidationGroup="One" Text=" Save Record" OnClick="InsertData" ></asp:Button>
                                </div>
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
        </div>
    </asp:Content>

    Thanks

    Thursday, August 16, 2018 4:30 PM

Answers

  • User-893317190 posted

    Hi JagjitSingh,

     I have tried your code in my asp.net page, but it works.

    Below is my code

    <head runat="server">
          
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
         <script src="../Scripts/jquery.validate.js"></script>
      
     
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    </head>
    <body>
        <form id="form1" runat="server">
            <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" ValidationGroup="One" Text=" Save Record" onclick="btnInsert_Click"></asp:Button>
                                </div>
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
        </div>
    
             <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
             
                $("#form1").validate({
                    rules: {
                        <%=txt_Code.UniqueID %>: {
                            minlength: 2,
                            required: true
                        },
                        <%=txt_Inf.UniqueID %>: {                       
                             required: true
                         }
                    }, messages: {}
                });
    
    
              
                 })
        </script>
    
        </form>
    
    

    The result.

    I suggest you could use F12 developer tool to help you debug at client side.

    https://developers.google.com/web/tools/chrome-devtools/console/get-started

    Best regards ,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 17, 2018 9:14 AM

All replies

  • User475983607 posted

    Phrases like "not work" are not specific enough to provide assistance.  What is not working?  Do you see errors in the dev tools console?  Does the form really have an id of aspnetForm? Have you tried simply viewing the form to verify it's configured correctly?  Have you tried reading the jquery validate support documentation?

    What about just using HTML controls rather than ASP server controls?  Or maybe using ASP Validation Controls?

    Thursday, August 16, 2018 6:48 PM
  • User-893317190 posted

    Hi JagjitSingh,

     I have tried your code in my asp.net page, but it works.

    Below is my code

    <head runat="server">
          
        <script src="../Scripts/jquery-1.10.2.min.js"></script>
         <script src="../Scripts/jquery.validate.js"></script>
      
     
         <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    </head>
    <body>
        <form id="form1" runat="server">
            <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" ValidationGroup="One" Text=" Save Record" onclick="btnInsert_Click"></asp:Button>
                                </div>
                            </div>
                        </div>
                    </div>        
                </div>
            </div>
        </div>
    
             <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
             
                $("#form1").validate({
                    rules: {
                        <%=txt_Code.UniqueID %>: {
                            minlength: 2,
                            required: true
                        },
                        <%=txt_Inf.UniqueID %>: {                       
                             required: true
                         }
                    }, messages: {}
                });
    
    
              
                 })
        </script>
    
        </form>
    
    

    The result.

    I suggest you could use F12 developer tool to help you debug at client side.

    https://developers.google.com/web/tools/chrome-devtools/console/get-started

    Best regards ,

    Ackerly Xu

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, August 17, 2018 9:14 AM
  • User-474980206 posted
    Couple issues.

    If the uniqueid is not a valid JavaScript identifier then it needs to be quoted.

    The method validate() can only be called one with options. If your sample code is not the first caller you should use the rules() method

    https://jqueryvalidation.org/rules/
    Saturday, August 18, 2018 4:03 PM