How to target input using jQuery Validate plugin without using the name attribute?

Question

I'm using the popular jQuery validation plugin: Validation

As many know, this plugin works great and is well thought through. However, I'm using an asp.net application which automatically generates the name attributes for all my input fields. Further, the names it generates seem to be invalid to use in the jquery plugin.

I'm wondering if there is another way to target input elements using this plugin, or if the name attribute is the only way.

    <script>
jQuery.validator.messages.required = "";
    $(document).ready(function () {
        $('#form1').validate({
        debug: true;
        invalidHandler: function(e, validator) {
            var errors = validator.numberOfInvalids();
            if (errors) {
                var message = errors == 1
                    ? 'You missed 1 field. It has been highlighted below'
                    : 'You missed ' + errors + ' fields.  They have been highlighted below';
                $("div.error span").html(message);
                $("div.error").show();
            } else {
                $("div.error").hide();
            }
        },

            rules: {
                <%=firstName.UniqueID%>: {
                    required: true,
                    minlength: 6,
                },
                email: {
                    required: true,
                    email: true,
                },
                password: {
                    required: true,
                    minlength: 6,
                },
                verify:{
                    required: true,
                    equalTo: "#password",
                }


            }
        });
    });

</script>

I tried replacing the name with a server side call of the property (shown in "firstName") which does properly call back the name. But the jquery doesn't work at that point, so I'm guessing the generated name is invalid since it has "$" in it.

Rendered:

    <script>

jQuery.validator.messages.required = "";

    $(document).ready(function () {

        $('#form1').validate({

        debug: true;

        invalidHandler: function(e, validator) {

            var errors = validator.numberOfInvalids();

            if (errors) {

                var message = errors == 1

                    ? 'You missed 1 field. It has been highlighted below'

                    : 'You missed ' + errors + ' fields.  They have been highlighted below';

                $("div.error span").html(message);

                $("div.error").show();

            } else {

                $("div.error").hide();

            }

        },



            rules: {

                ctl00$ContentPlaceHolderBody$firstName: {

                    required: true,

                    minlength: 6,

                },

                email: {

                    required: true,

                    email: true,

                },

                password: {

                    required: true,

                    minlength: 6,

                },

                verify:{

                    required: true,

                    equalTo: "#password",

                }





            }

        });

    });



</script>

And the HTML:

<label>Name</label>

<input name="ctl00$ContentPlaceHolderBody$firstName" type="text" id="firstName" /><br />



<label>Email</label>

<input name="ctl00$ContentPlaceHolderBody$ctl00" type="text" /><br />



<label>Password</label>

<input name="ctl00$ContentPlaceHolderBody$password" type="text" id="password" /><br />



<label>Verify Password</label>

<input name="ctl00$ContentPlaceHolderBody$verify" type="text" id="verify" /><br />



<input type="submit" name="ctl00$ContentPlaceHolderBody$submit" value="Submit" id="submit" />

Why do you need to have names like those? Cant you change them to something valid? — Marco Johannesen
– Marco Johannesen, Commented Oct 21, 2011 at 20:02
asp.net automatically generates those names. I can't change them to anything else... Especially something without the $ — Barrett Kuethen
– Barrett Kuethen, Commented Oct 21, 2011 at 20:09

Damon Bauer · Accepted Answer · 2011-10-21 19:53:17Z

1

The docs say any name with illegal JavaScript identifiers need to be wrapped in quotes when you set the rules options. Here's the link: http://docs.jquery.com/Plugins/Validation/Reference#Fields_with_complex_names_.28brackets.2C_dots.29

I'm not sure though, if it will work with a $ symbol, but it might be worth a try if you haven't already.

answered Oct 21, 2011 at 19:53

Damon Bauer

2,7361 gold badge23 silver badges36 bronze badges

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

2 Comments

Barrett Kuethen Over a year ago

That worked! I still had to give the long auto-generated name, but at least it worked!

Damon Bauer Over a year ago

Yep, you have to use the generated name because asp.net renders them before the page even loads, so the browser sees the long names - thus jQuery does as well.

Collectives™ on Stack Overflow

How to target input using jQuery Validate plugin without using the name attribute?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related