Text box minimum length validation in JavaScript

Question

Total counts 100. After I entered 101 letter show alerts or error message it is not working in this code.

Html

<asp:TextBox ID="txtarea" runat="server" Width="700px" Height="80px" TextMode="MultiLine"
    onkeyup="cnt(this)" MaxLength="100"></asp:TextBox>
<p style="text-align: right;">
    <asp:Label ID="lblcharcnt" runat="server" Text="100"></asp:Label>
</p>
<asp:Label ID="lblcount" runat="server" Text='<%#Eval("row") %>' Visible="false"></asp:Label>

JavaScript

<script type="text/javascript">
    function cnt(text) {
        var a = text.value;
        var b = "character left.";
        text.parentNode.getElementsByTagName('span')[0].innerHTML = 100 - a.length + " " + b;
    }
</script>

pure jquery jsfiddle.net/umynof8b

Mark
– Mark

2017-05-10 07:05:00 +00:00
Commented May 10, 2017 at 7:05 — Mark
– Mark, Commented May 10, 2017 at 7:05

SynozeN Technologies · Accepted Answer · 2017-05-10 07:06:29Z

2

Did changes in javascript. Try it and let me know if further help require.

function cnt(text) {
        var a = text.value;
        var b = "character left.";
        if (a.length > 100) {
            alert('length grater than 100.');
        } else {
            text.parentNode.getElementsByTagName('span')[0].innerHTML = 100 - a.length + " " + b;
        }
    }

answered May 10, 2017 at 7:06

SynozeN Technologies

1,3431 gold badge14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ivin Raj Over a year ago

Thanks Sir @InnovaITve Solutions

VDWWD · Accepted Answer · 2017-05-10 07:13:36Z

1

This is the code I use for this purpose. Note the use of <%= 1000 - TextBox1.Text.Length %>. This will make sure the correct remaining characters are displayed after PostBack or setting an initial value.

<asp:TextBox ID="TextBox1" onKeyUp="setMaxLength(this)" isMaxLength="1000" runat="server" TextMode="MultiLine"></asp:TextBox>

<span id="<%=TextBox1.ClientID %>_remain"><%= 1000 - TextBox1.Text.Length %></span>

<script type="text/javascript">
    function setMaxLength(control) {
        //get the isMaxLength attribute
        var mLength = control.getAttribute ? parseInt(control.getAttribute("isMaxLength")) : ""

        //was the attribute found and the length is more than the max then trim it
        if (control.getAttribute && control.value.length > mLength) {
            control.value = control.value.substring(0, mLength);
            alert('Length exceeded');
        }

        //display the remaining characters
        var modid = control.getAttribute("id") + "_remain";
        if (document.getElementById(modid) != null) {
            document.getElementById(modid).innerHTML = mLength - control.value.length;
        }
    }
</script>

edited May 10, 2017 at 7:13

answered May 10, 2017 at 7:05

VDWWD

35.7k23 gold badges67 silver badges87 bronze badges

1 Comment

Ivin Raj Over a year ago

Thanks Sir @VDWWD

Saurabh · Accepted Answer · 2017-05-10 07:07:51Z

1

This will show a popup if you eneter more than 100 characters in textbox
ASP.Net

<asp:TextBox ID="txtQ1F0" runat="server" TextMode="MultiLine" Rows="2" Columns="35" onKeyUp="javascript:Count(this);" onChange="javascript:Count(this);" />

javascript

 function Count(text) {
        var maxlength = 100; //set your value here 
        var object = document.getElementById(text.id)  
        if (object.value.length > maxlength) {
            object.focus(); //set focus to prevent jumping
            var count1=object.value.length;
            alert('You have exceeded the comment length of 100 characters , total characters entered are : '+count1);
            object.value = text.value.substring(0, maxlength); //truncate the value
            object.scrollTop = object.scrollHeight; //scroll to the end to prevent jumping
            return false;
        }
        return true;
    }

edited May 10, 2017 at 7:07

answered May 10, 2017 at 7:02

Saurabh

1,6317 gold badges25 silver badges45 bronze badges

1 Comment

Saurabh Over a year ago

@IvinRaj , if it answer your question than please mark it as answer

Karthick Raju · Accepted Answer · 2017-05-10 07:19:48Z

I have rewritten JavaScript function like below. Now, User can not enter post maximum length. User will be restricted to enter only 100 characters

     function multilineTextBoxKeyDown(textBox, e, maxLength) {
        var selectedText = textBox.value;
        var b = "character left.";
        if (!checkSpecialKeys(e)) {
            var length = parseInt(maxLength);
            if (textBox.value.length > length) {
                textBox.value = textBox.value.substring(0, maxLength);
                textBox.parentNode.getElementsByTagName('span')[0].innerHTML = maxLength - textBox.value.length + " " + b;
                alert('Maximum no of characters reached'); //go on with your own comment
            }
            else {
                textBox.parentNode.getElementsByTagName('span')[0].innerHTML = maxLength - textBox.value.length + " " + b;
            }
        }
        else {
            //Below code shows how many characters left on deleting the text
            textBox.parentNode.getElementsByTagName('span')[0].innerHTML = maxLength - textBox.value.length + " " + b;
        }
    }

    function checkSpecialKeys(e) {
        if (e.keyCode != 8 && e.keyCode != 9 && e.keyCode != 33 && e.keyCode != 34 && e.keyCode != 35 && e.keyCode != 36 && e.keyCode != 37 && e.keyCode != 38 && e.keyCode != 39 && e.keyCode != 40 && e.keyCode != 46) {
            return false;
        } else {
            return true;
        }
    }

Also, call JavaScript like below

<asp:TextBox ID="txtarea" runat="server" Width="700px" Height="80px" TextMode="MultiLine"  onkeyup="multilineTextBoxKeyDown(this,event,'100')" MaxLength="100"></asp:TextBox>
<p style="text-align: right;">
<asp:Label ID="lblcharcnt" runat="server" Text="100"></asp:Label>

Code is tested now. Also, remaining number of characters will be shown on deleting the text from textbox

User6667769 · Accepted Answer · 2017-05-10 07:13:11Z

0

Hope it helps

Html:

  <asp:TextBox ID="yourid" runat="server" maxlength="100" ></asp:TextBox>

Script:

  $("#yourid").keyup(function ()
    {
        var a=$("#yourid").val();


        if(a.length>99)
        {
            alert("error");
        }


    });

answered May 10, 2017 at 7:13

User6667769

8051 gold badge8 silver badges25 bronze badges

Comments

user688 · Accepted Answer · 2017-05-10 07:23:22Z

0

It will help you, Try this,

Javascrtipt

    $("#textboxId").keyup(function ()
    {
            var Textboxvalue = $("#textboxId").val();


            if (Textboxvalue .length > 100)
            {
                alert("Should be 100 characters only");
            }


        });

Html

  <asp:TextBox  ID="textboxId" runat="server" MaxLength="100"></asp:TextBox>

answered May 10, 2017 at 7:23

user688

3613 silver badges23 bronze badges

Collectives™ on Stack Overflow

Text box minimum length validation in JavaScript

6 Answers 6

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related