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 stackoverflow.com/questions/619816/…. I am on mobile and can't flag as duplicate question. — mitch
– mitch, Commented Jun 27, 2013 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
– ploni, Commented Jun 28, 2013 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
– mitch, Commented Jun 28, 2013 at 14:39
I think you are mixing up the plugins. validation engine - 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 - jqueryvalidation.org - the rules are applied to the fields in the script. — ploni
– ploni, Commented Jun 28, 2013 at 15:03
@ploni, there are several ways (including inline) to declare rules using the jQuery Validate plugin. — Sparky
– Sparky, Commented Jul 23, 2013 at 19:28

Ryley · Accepted Answer · 2013-06-27 20:40:13Z

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, 2013 at 20:40

Ryley

21.3k2 gold badges69 silver badges82 bronze badges

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

2 Comments

ploni Over a year ago

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?

Ryley Over a year ago

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.

Arindam Bhattacharjee · Accepted Answer · 2013-07-23 19:30:28Z

0

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%>"
    }
}});

edited Jul 23, 2013 at 19:30

answered Jul 23, 2013 at 19:20

Arindam Bhattacharjee

12 bronze badges

Comments

th1rdey3 · Accepted Answer · 2013-11-03 12:25:05Z

0

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%>'});

answered Nov 3, 2013 at 12:25

th1rdey3

4,4588 gold badges37 silver badges69 bronze badges

Collectives™ on Stack Overflow

jquery validation not working on asp.net controls

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related