jQuery and Array type classes

Question

I'm trying to access all inputs with the following class:

validate['number']

Of course sometimes some of them are:

validate['required', 'number']

So I need all that have number there. This is part of a Chronoform system that makes these classes.

I have tried this, figured if it worked I would go from there and make it work for all that even had required or alpha.

jQuery(document).ready(function() {
  jQuery(".validate['number']").change(function() {
    if(this.value <= '') {
      this.value = '0';
    }
  });
});

But no go, it won't find them. So how do I find classes like this and their sub parts? I don't even know what to call these kinds of classes since I've never seen them before.

Niet the Dark Absol · Accepted Answer · 2013-02-01 02:02:12Z

2

Class names with special characters can't be accessed directly with .classname.

Instead, you need to use this selector: [class~="validate['number']"]

answered Feb 1, 2013 at 2:02

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

1 Comment

jfreak53 Over a year ago

Awesome! It worked this way for me jQuery('input[class~="validate[\'number\']"]')

Marko Dumic · Accepted Answer · 2013-02-01 02:56:03Z

Make sure you escape special characters properly. Try this:

$(".validate\\[\\'required\\'\\]")

From the jQuery API docs:

To use any of the meta-characters ( such as !"#$%&'()*+,./:;<=>?@[]^`{|}~ ) as a literal part of a name, it must be escaped with with two backslashes: \. For example, an element with id="foo.bar", can use the selector $("#foo\.bar").

More on selector escaping: http://api.jquery.com/category/selectors/

I would even suggest that you extend jQuery's support for pseudo selectors like this:

(function () {
    var rRequired = /\bvalidate\[[^\]]*\brequired\b[^\]]*\]/,
        rAlpha = /\bvalidate\[[^\]]*\balpha\b[^\]]*\]/,
        rNumber = /\bvalidate\[[^\]]*\bnumber\b[^\]]*\]/;

    $.extend($.expr[':'], {
        mandatory: function(elem) {
            return rRequired.test(elem.className)
        },

        number: function (elem) {
            return rNumber.test(elem.className)
        },

        alpha: function (elem) {
            return rAlpha.test(elem.className)
        }
    });
})();

Then you can use much simpler selectors in your code:

$('input:mandatory')
$('input:number')
$('input:alpha')

Note: I tried to make ":required" pseudo-selector but it doesn't work for some reason, hence :mandatory instead.

Collectives™ on Stack Overflow

jQuery and Array type classes

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related