locked
Maxlength Validation RRS feed

  • Question

  • User1216627406 posted

    Greetings experts,

    I have two form fields, txtName and txtAddress.

    I will like to restrict maxlength for each of them to 100 characters.


    How can I do this in jQuery?

    Thanks in advance

              <asp:gridview ID="Gridview1" RowStyle-Wrap="false" gridlines="None" CssClass="responsiveTable1" runat="server" ShowFooter="true" AutoGenerateColumns="false" onrowdatabound="Gridview1_RowDataBound" OnRowDeleting="Gridview1_RowDeleting">
                <Columns>
                <asp:BoundField DataField="RowNumber" Visible="false" HeaderText="Row Number" />
                <asp:TemplateField HeaderText="Name">
                 <headerstyle horizontalalign="Left" />
                    <ItemTemplate>
                        <asp:TextBox ID="txtName" placeholder="Name...(e.g, Jane Doe)" runat="server" style="width:375px;" AutoPostBack="true" class="form-control textClass" OnTextChanged="txtName_TextChanged"></asp:TextBox><br />
                        <asp:CheckBox ID="grid1Details" ClientIDMode="Static" runat="server" Checked="false" AutoPostBack="true" OnCheckedChanged="Grid1CheckChanged" /><span style="color:#ff0000">*Check this box if N/A</span>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="Address">
                <ItemStyle HorizontalAlign="Left"></ItemStyle>
                    <ItemTemplate>
                        <asp:TextBox ID="txtAddress" placeholder="Address..." runat="server" style="width:375px;" class="form-control textClass"></asp:TextBox><br /><br />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                     <asp:Button ID="ButtonAdd" runat="server" Text="Add" 
                            onclick="ButtonAdd_Click" CssClass="grvAddButton" /><br /><br /><br>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="">
                    <ItemTemplate>
                     <asp:Button ID="btnDelete" runat="server" Text="Delete" CommandName="Delete"
                             CssClass="grvDelButton" OnClientClick="return confirm('Are you sure you want to remove this row?')"  /> <br /><br /><br />
                    </ItemTemplate>
                </asp:TemplateField> 
                </Columns>
              </asp:gridview>

    Thursday, March 29, 2018 6:07 PM

All replies

  • User753101303 posted

    Hi,

    You know that you could add MaxLength="100" to your textbox markup? Do you really have to use jQuery?

    <asp:TextBox ID="txtName" MaxLength="100" placeholder="Name...(e.g, Jane etc...

    Thursday, March 29, 2018 6:25 PM
  • User1216627406 posted

    Hi Patrice,

    Yes, I know that but management wants users to have a message displayed that they have reached allowed character limit.

    Thanks for your help.

    NOTE: I was able to do something similar with this range code:

    <script type="text/javascript">
           $("#survey_form").validate({
               rules: {
                   EmpID: {
                       required: true,
                       minlength: 6,
                       maxlength: 10
                   }
               }
           });
    </script>

    Problem is it doesn't work for gridview.

    In this case, it would have been maxlength: 50

    Thursday, March 29, 2018 6:41 PM
  • User753101303 posted

    Great. Wanted to make sure first why jQuery is needed. Use "view source" to see the name for this input box. It is not always easy with WebForms (as the id is generated for you). jQuery Validate should be able to use attributes and it might be easier to keep it that way.

    My first try would be to investigate it something like this could work :
    - I would still use maxlength to limit the length
    - I would try to use something like parent.on("keyup","input[maxlength],function) syntax which should allow to call a function for this event and even if input elements with a malength attribute at later added dynamically to the form
    - the code could check the current length against the maxlength attribute and apply some effect if the maximum length is reached.

    This way it might show visually that the maximum length is reached as soon as it happens rather than to let the user type beyond this llimit, show an error message and have to then think about how to shorten all the extra text he already typed.

    Thursday, March 29, 2018 8:17 PM
  • User-1838255255 posted

    Hi simflex,

    According to your description and code, I make a sample use jQuery, please check:

    Sample Code:

    <head>
        <title></title>
        <meta charset="utf-8" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script>
            $(function () {
                $("#Text1").keyup(function () {
                    var length = $(this).val().length;
                    if (length >= 10) {
                        alert("Text Length is too long!");
                    }
                });
            })
        </script>
    </head>
    <body>
        <input id="Text1" type="text" />
    </body>

    Best Regards,

    Eric Du 

    Friday, March 30, 2018 2:28 AM
  • User1216627406 posted

    Hi Eric,

    My description is that length cannot be more than 100 characters.

    However, using a 10 character limit, your code did not work.

    This worked for me however:

                          <asp:RegularExpressionValidator ID="rev2" runat="server" ControlToValidate="txtName" maxlength="225" style="color:red;font-weight:bold;" ErrorMessage="You have reached a maximum characters of 10" ValidationExpression="^[\s\S]{1,10}$" /><br /><br />
    

    Friday, March 30, 2018 2:40 PM