JQuery validation Not working for asp.net textbox

Question

My $("#form1").validate({}); is not working

My MarkUp

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="_Default.aspx.cs" Inherits="WebApplication1._3_Tier._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">

    <title>Insert Records into DataBase</title>
    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/a.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.validate.min.js" type="text/javascript"></script>
</head>
<body>
    <h3>
        Demo: 3-Tier Architecture</h3>
    <form id="form1" runat="server">
    <div>
        <p>
            <a href="List.aspx">List Records</a></p>
        <asp:Label ID="lblMessage" runat="Server" ForeColor="red" EnableViewState="False"></asp:Label>
        <table style="border: 2px solid #cccccc;">
            <tr>
                <td>
                    First Name:
                </td>
                <td>
                    <asp:TextBox ID="txtFirstName" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="AddRecords" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

My JS

$(document).ready(function () {

    var firstname = $('#txtFirstName').val();


    $("#form1").validate({
        rules: {
            firstname: {
                required: true,

            }
        },
        messages: {
            firstname: {
                required: "Please provide your firstname",

            }
        }
    });
});

I took help of this this post
JQuery Validation is not validating

I Tried to rectify My Code ..Still after that it is not working

this is generated HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
    <style type="text/css">
        body
        {
            font-family: Arial, Trebuchet Ms;
            font-size: 10pt;
        }
    </style>
    <title>
    Insert Records into DataBase
</title>
    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script src="../Scripts/a.js" type="text/javascript"></script>
    <script src="../Scripts/jquery.validate.min.js" type="text/javascript"></script>

</head>
<body>
    <h3>
        Demo: 3-Tier Architecture</h3>
    <form method="post" action="_Default.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMjEzNDcyMDczZGQt6WgCuARQGKOLro6pdjwaUvt/QFoxwH5v1RzCNAUj7w==" />
</div>

<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEdAAX8Nm0IHiD/KCZocX+BlM2eTNr8+Dx/H+2fNfPhxgyex+tZBdiRon5d1qE03oo5TvNalnLgDFTt8y4U1Y3swfOyPOaW1pQztoQA36D1w/+bXdBIngoW+rlnKfoMZ3QFO1yNN5iBqFwWfHPEKsfQ/9eW" />
</div>
    <div>
        <p>
            <a href="List.aspx">List Records</a></p>
        <span id="lblMessage" style="color:Red;"></span>
        <table style="border: 2px solid #cccccc;">
            <tr style="background-color: #507CD1; color: White;">
                <th colspan="3">
                    Add Records
                </th>
            </tr>
            <tr>
                <td>
                    First Name:
                </td>
                <td>
                    <input name="txtFirstName" type="text" id="txtFirstName" />
                </td>
            </tr>
            <tr>
                <td>
                    Last Name:
                </td>
                <td>
                    <input name="txtLastName" type="text" id="txtLastName" />
                </td>
            </tr>
            <tr>
                <td>
                    Age:
                </td>
                <td>
                    <input name="txtAge" type="text" size="4" id="txtAge" />
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;
                </td>
                <td>
                    <input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" />
                </td>
            </tr>
        </table>
    </div>
    </form>
</body>
</html>

I tried to run on http://jsfiddle.net/7T7ZX/ ...it is not working

I am debugging on Firebug . it is debugging fine there .

Please suggest

Ruskin · Accepted Answer · 2014-05-07 14:16:46Z

2

The ID of the generated input will not be txtFirstName -- asp.net creates a long ID based on the hierarchy of the element in the page. Check it out in your browser's F12 tools (or dev tools on mac) if you don't believe me.

If you have access to the jQuery inline in the page then you can use the element's generated Client ID like this:

var firstname = $('#<%=txtFirstName.ClientID%>').val();

If you don't want to do that, a workaround is using classes instead of ids to select the elements:

<asp:TextBox ID="txtFirstName" runat="server" cssclass="firstName" />

...

var firstname = $('.firstName').val();

edited May 7, 2014 at 14:16

answered May 7, 2014 at 14:07

Ruskin

6,2414 gold badges49 silver badges65 bronze badges

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

4 Comments

user3487944 Over a year ago

OK .. based on Your suggestion . I modified My Code .. It worked ..thanks

user3487944 Over a year ago

in JS i changed .... rules: { firstname: { required: true, } }, ....to .... rules: { txtfirstname: { required: true, } },

user3487944 Over a year ago

But now I am getting another unnessesery error "Please enter a value greater than or equal to 0" ...why so .i didnt use anything

Ruskin Over a year ago

I is time to use non-minified versions of the validation library and put breakpoints in your code and debug it (I have done that in chrome but not in firefox). A helpful step might be doing a find in the .js file for "Please enter a value" to see where that message may have been triggered.

Quarty · Accepted Answer · 2014-05-07 14:11:57Z

1

You are using two different selectors here and I think it's a good idea to make sure they are correct. Just because your code says id="txtFirstName" does not mean the source code is the same.

Load the web page and open up the source code, find your in the source code and make sure it has an id="form1". Then do the same for the textbox, make sure the textbox has an id="txtFirstName".

It's possible (if you are using webforms, say) that when your website runs these items are being renamed to something like id="_001_controller_txtFirstName" (I can't remember exactly, I just remember it renames things on your behalf!)

If this is the case, you'll need to update your jQuery abit, this should do the trick:

var firstname = $("#<%= txtFirstName.ClientID %>");
$("#<%= form1.ClientID %>").validate({...

edited May 7, 2014 at 14:11

answered May 7, 2014 at 13:57

Quarty

898 bronze badges

4 Comments

user3487944 Over a year ago

OK . I changed that..still it doesnt validate the textbox

Quarty Over a year ago

Sorry, please see the edit and try: var firstname = $("[id^='txtFirstName']");

Ruskin Over a year ago

var firstname = $("<%= txtFirstName.ClientID %>"); will not work - you forgot the #.

user3487944 Over a year ago

in JS i changed .... rules: { firstname: { required: true, } }, ....to .... rules: { txtfirstname: { required: true, } },

Vedant Terkar · Accepted Answer · 2014-05-07 14:16:22Z

0

Change This Line:

<form id="form1" runat="server">

to

<form id="form1" runat="server" name="form">

or try:

$("#form1").validate({ ... });

Here You are accessing form element by its name in JQuery, And You have'nt given any name to it.

Thus either give a name or access it by it's id.

According to Your Comment.

EDIT:

Try This:

change:

<input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" />

to:

<input type="submit" name="btnSubmit" value="Submit" id="btnSubmit" OnClick="validate_form(this);event.preventDefault();event.stopPropagation();" />

and in your <head> section add:

<script type="text/javascript">

function validate_form(x){
var frm=$(x).closest("form");
$(frm).validate({...});
}

</script>

Inform me if it helps you.

Hope it'll Help you Cheers!

edited May 7, 2014 at 14:16

answered May 7, 2014 at 13:52

Vedant Terkar

4,7228 gold badges38 silver badges63 bronze badges

2 Comments

user3487944 Over a year ago

I already change the selectors like this in my Example . it still doesnt validate the textbox

Vedant Terkar Over a year ago

@user3487944, Try Using Debugger on FireFox ctrl+shift+k and reload page. Does all the resources loads correctly? check in network tab.

Collectives™ on Stack Overflow

JQuery validation Not working for asp.net textbox

3 Answers 3

4 Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related