Validate HTML TextArea on Button click using JavaScript

Last Reply on Feb 18, 2014 02:35 AM By Azim

Posted on Feb 17, 2014 11:47 PM

I want to do javascript validation for HTML TextArea. My code is given below.

<script type="text/javascript">
    function formValidate() {
        debugger;
        var comt = document.getElementById('ContentPlaceHolder1_commentBox');
        var flag = 0;
        if (comt.value.length == 0) {
            document.getElementById('spnComment').innerHTML = "*";
            comt.setAttribute('style', 'border: dashed 1px #FF0000;width:490px;height:100px');
            flag = 1;
        }
        else {
            document.getElementById('spnComment').innerHTML = "";
            comt.setAttribute('style', 'border: solid 1px #cbcbcb;width:490px;height:100px');
        }

        if (flag != 1) {
            return true;
        }
        else {
            return false;
        }
     }
  </script>

HTML Code

  <div class="facebookcomments">
     <div style="float:left; width:500px">
        <textarea id="commentBox" name="commentBox"><%=cmtValue%></textarea>
    </div>
    <div>
    <div style="float:left; width:300px; padding:10px 0;">
     <asp:Button ID="btnComment" runat="server" Text="Comment" OnClientClick="javascript: return formValidate();return false;" BackColor="#b4d33f" OnClick="btnComment_Click" /> </div>                  
    </div>
   </div>

How i will do it. Please suggest me.

Posted on Feb 18, 2014 02:35 AM

You are having from values in TextArea that is why its not going inside of If condition

 

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function formValidate() {
            var comt = document.getElementById('commentBox');
            var flag = 0;
            if (comt.value.length == 0) {                
                comt.setAttribute('style', 'border: dashed 1px #FF0000;width:490px;height:100px');
                flag = 1;
            }
            else {                
                comt.setAttribute('style', 'border: solid 1px #cbcbcb;width:490px;height:100px');
            }

            if (flag != 1) {
                return true;
            }
            else {
                return false;
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div class="facebookcomments">
        <div style="float: left; width: 500px">
            <textarea id="commentBox" name="commentBox" rows="5" cols="10" ><%= Value%></textarea>
        </div>
        <div>
            <div style="float: left; width: 300px; padding: 10px 0;">
                <asp:Button ID="btnComment" runat="server" Text="Comment" OnClientClick="javascript: return formValidate();return false;"
                    BackColor="#b4d33f" OnClick="btnComment_Click" />
            </div>
        </div>
    </div>
    </form>
</body>
</html>

Image: When Text area is null

Set Value property = string.Empty

    protected string Value { get; set; }
    protected void Page_Load(object sender, EventArgs e)
    {
        Value = string.Empty; ;
    }