Why Jquery is not working for asp.net textbox's CssClass Property?

Question

I am tying to validate the textboxes for achieving 'alphabets only' property in asp.net page with Jquery.

Here is the code

    <script src="//code.jquery.com/jquery-1.10.2.js"></script>

    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
     .............codes.............

      <script type="text/javascript">
    $('.alph').keypress(function (e) {
        var regex = new RegExp("^[a-zA-Z\s]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        }
        else {
            e.preventDefault();
            alert('Alphabets only');
            return false;
        }
    });
   </script>
 .............codes.............

 <asp:TextBox ID="txt_name" CssClass="alph" BorderColor="Gray" Font-Size="Large" Height="25" Width="250" runat="server"></asp:TextBox>

This code didn't work and I am sure my computer is connected to the internet to reach code.jquery.com. Help me please.

When you type $('.alph') to developer console, can you see the textbox showing up? — Sefa, Dec 25 '14 at 13:49
you meant the intelligence! when I try to add cssclass prop, it didn't pop up "alph" as one of the listed items -@vgSefa — Manoj Kumar, Dec 25 '14 at 13:54
Perhaps the Jquery class selector works only for class and not for CssClass — user2314737, Dec 25 '14 at 14:00
put an alert or console inside your function to first verify if your jQuery code is executing or not. — Rahul Singh, Dec 25 '14 at 14:00
@user2314737 - No, `CssClass` ultimately renders as `class` in browser so jQuery selector picks that. — Rahul Singh, Dec 25 '14 at 14:01
Make sure CssClass was really applied as class for txt_name element — agentpx, Dec 25 '14 at 14:08

score 0 · Accepted Answer · answered Dec 25 '14 at 14:08

try this script code after Document.ready block

$(document).ready(function(){

    $('.alph').keypress(function (e) {
        var regex = new RegExp("^[a-zA-Z\s]+$");

        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        }
        else {
            e.preventDefault();
            alert('Alphabets only');
            return false;
        }
    });

});

Before you can safely use jQuery you need to ensure that the page is in a state where it's ready to be manipulated. With jQuery, we accomplish this by putting our code in a function, and then passing that function to $(document).ready(). The function we pass can just be an anonymous function.

Most welcome ..you can find here more about Document ready http://stackoverflow.com/questions/13062246/when-should-i-use-jquerys-document-ready-function — Anant Dabhi, Dec 25 '14 at 14:11

score 0 · Answer 2 · answered Dec 25 '14 at 14:09

My mistake! Since I am new to Jquery I didn't know about 'doc.ready' I corrected the code as

$(document).ready(function () {
 $('#<%=txt_name.ClientID %>').keypress(function (e) {
        var regex = new RegExp("^[a-zA-Z\s]+$");
        var str = String.fromCharCode(!e.charCode ? e.which : e.charCode);
        if (regex.test(str)) {
            return true;
        }
        else {
            e.preventDefault();
            alert('Alphabets only');
            return false;
        }
    });
    });

Code works perfect!

Why Jquery is not working for asp.net textbox's CssClass Property?

2 Answers2