jquery validation not working on asp.net controls

Question

I have a few textboxes on my page. I am using Jquery validation plugin to validate. I have the name attribute set on the textboxes and I use that name to set the rules. When I run my page, the browser renames my textboxes and the validation does not work anymore. By does not work, I mean that the page does not get validated at all. No errors show up.

Here are my textboxes:

<div class="container1">
  <span class="span150Padded">Last</span>
     <asp:TextBox ID="txtLastName" name="txtLastName" runat="server" CssClass="textBoxMedium"></asp:TextBox>
</div>
<div class="container1">
   <span class="span150Padded">First</span>
      <asp:TextBox ID="txtFirstName" name="txtFirstName" runat="server" CssClass="textBoxMedium"></asp:TextBox>
</div>
<div class="container1">
   <span class="span150Padded">Mid Init, Suffix</span>
      <asp:TextBox ID="txtMidInit" name="txtMidInit" runat="server" CssClass="textBoxSmall"></asp:TextBox>
   <span style="padding-left: 5px">
      <asp:TextBox ID="txtSuffix" name="txtSuffix" runat="server" CssClass="textBoxSmall"></asp:TextBox></span>
</div>

Here is the validation code:

 $("form").validate(
  {
      onfocusout: function (element) { jQuery(element).valid(); },

      rules:
    {
        txtLastName:
        {
            isSpecialChar: true,
            maxlength: 13,
            oneOrBothEntered: "txtFacilityName"
        },
        txtFirstName:
        {
            isSpecialChar: true,
            maxlength: 11,
            conditionallyRequired: "txtLastName"
        },
        txtMidInit:
        {
            isSpecialChar: true,
            maxlength: 1
        },
        txtSuffix:
        {
            isSpecialChar: true,
            maxlength: 5
        }
    }
});

Here is the rendered page after it loads:

<div class="container1">
                    <span class="span150Padded">Last</span>
                    <input name="ctl00$MainContent$txtLastName" type="text" value="lastname" id="MainContent_txtLastName" class="textBoxMedium" name="txtLastName" />
                </div>
                <div class="container1">
                    <span class="span150Padded">First</span>
                    <input name="ctl00$MainContent$txtFirstName" type="text" value="firstname" id="MainContent_txtFirstName" class="textBoxMedium" name="txtFirstName" />
                </div>
                <div class="container1">
                    <span class="span150Padded">Mid Init, Suffix</span>
                    <input name="ctl00$MainContent$txtMidInit" type="text" value="m." id="MainContent_txtMidInit" class="textBoxSmall" name="txtMidInit" /><span
                        style="padding-left: 5px">
                        <input name="ctl00$MainContent$txtSuffix" type="text" value=" " id="MainContent_txtSuffix" class="textBoxSmall" name="txtSuffix" /></span>
                </div>

I tried to rename the textboxes programmatically and then the validation worked. The problem with that was that then my code behind could not find the controls anymore. When I tried to get the text in the textbox - txtLastName.Text - I always got an empty string.

Here is the code that I used to rename the textboxes.

function rename() {
var inputs = document.getElementsByTagName("input");
var i;
for (i = 0; i < inputs.length; i++) {
    if (inputs[i].type == "text" || inputs[i].type == "password") {
        indexFirst = inputs[i].name.indexOf('$') + 1;
        indexSecond = inputs[i].name.indexOf('$', indexFirst);
        inputs[i].setAttribute("name", inputs[i].name.substring(indexSecond + 1));
    }
}
}

I don't know if this makes a difference, but I am using a Master Page.

Please help. TIA

Checkout this http://stackoverflow.com/questions/619816/jquery-validation-plugin-in-asp-net-web-forms. I am on mobile and can't flag as duplicate question. — mitch, Jun 27 '13 at 21:23
I tried using what a couple of those replies suggested which was to add <%=textbox.UniqueID%>. not working - no validation. Possibly because my validation rules are on a separate js file which is referenced in my aspx page. I have a function on my aspx page which initialized the validation. I know it works bec when I changed the name attributes (see above) the validation worked. The problem is when I add <%=...%> to the js file, it doesn't get highlighted the way it does on the aspx page = it just views it as plain text — ploni, Jun 28 '13 at 13:46
Don't use the names. Instead, you create validation rules and you can apply the rules as classes on each input or select. — mitch, Jun 28 '13 at 14:39
I think you are mixing up the plugins. validation engine - http://www.position-relative.net/creation/formValidator/ - is inline validation - the rules are applied to the class of the field. I am using Jorn Zaefferer's plugin - http://jqueryvalidation.org/ - the rules are applied to the fields in the script. — ploni, Jun 28 '13 at 15:03
@ploni, [there are several ways (including inline) to declare rules using the jQuery Validate plugin](http://stackoverflow.com/a/17792569/594235). — Sparky, Jul 23 '13 at 19:28
@ploni, the browser is not changing the names... it's the way your server-side script is generating the HTML. — Sparky, Jul 23 '13 at 19:30

score 1 · Answer 1 · answered Jun 27 '13 at 20:40

1

Why not just use the generated names then?

You just have to quote them in your rules object:

$("form").validate(
  {
      onfocusout: function (element) { jQuery(element).valid(); },

      rules:
    {
        'ctl00$MainContent$txtLastName':
        {
             isSpecialChar: true,
          //etc etc

answered Jun 27 '13 at 20:40

Ryley

21,046
2
67
81

Will the names always be the same? If something changes on my master page or in the page itself with the name change? what is ctl00? – ploni Jun 27 '13 at 20:45
I have no idea, but good point :) Maybe instead of using your own name attribute, add something like `data-rule="txtLastName"` and then construct your rules object using that to combine your rules with the weird `ctl00$MainContext$txtLastName` name attributes. – Ryley Jun 27 '13 at 20:56

Arindam Bhattacharjee · Answer 2 · 2013-07-23T19:30:28.323

The names of the control depends upon their parent control, and it isn't always possible to predict what their name would be at runtime. So, its always a good idea to use the UniqueID property of the control to get their names.

$("form").validate({
  onfocusout: function (element) { jQuery(element).valid(); },

  rules:
{
    '<%=txtLastName.UniqueID%>':
    {
        isSpecialChar: true,
        maxlength: 13,
        oneOrBothEntered: "<%=txtFacilityName.UniqueID%>"
    },
    '<%=txtFirstName.UniqueID%>':
    {
        isSpecialChar: true,
        maxlength: 11,
        conditionallyRequired: "<%=txtLastName.UniqueID%>"
    }
}});

score 0 · Answer 3 · answered Nov 03 '13 at 12:25

you can use the rules method to add rules after invoking jquery.validate() function. like this

$("form").validate({
  onfocusout: function (element) { jQuery(element).valid(); },
});

$('#<%=txtLastName.ClientID%>').rules('add',
{ isSpecialChar: true,  maxlength: 13, oneOrBothEntered: '<%=txtFacilityName.UniqueID%>'    });

$('#<%=txtFirstName.ClientID%>').rules('add',
{ isSpecialChar: true,  maxlength: 11, conditionallyRequired: '<%=txtLastName.UniqueID%>'});

jquery validation not working on asp.net controls

3 Answers3