Using a string as reference to object

Question

I want to pass as an object few options to my jQuery plugin. This is how I do it:

$("#contact-form").formValidate({
    contactname: {
        "minLength": 5
    },
    contactemail : {
        "minLength": 4
    },
    contactsubject : {
        "minLength": 10
    },
    contactmessage : {
        "minLength": 25
    }
});

In my function I want to refer to object with string which is input id of form field.

$.fn.formValidate = function(options) {
        //...
        var $this = $(this);
        var id = $this.attr("id");
        var length = options.id.minLength;
       //...
}

This solution doesn't work.

//edit

(function($, window, document, undefined ) {
    $.fn.formValidate = function(options) {
        /*
         * Deafults values for form validation.
         */
        var defaults = {
            minLength: 5,
            type : "text",
            required : true
        };

        var methods = {
            error : function(id) {
                $(id).css("border", "1px solid red");
            }
        }
        var settings = $.extend({}, defaults, options);
        console.log(options);

        this.children().each(function() {
            var $this = $(this);
            var tagName = $this[0].nodeName;
            var inputType = $(this).attr("type");
            var id = $this.attr("id");
            console.log(id);
            var property = options[id].minLength;

            if (tagName == "INPUT") {
                console.log("property: " + property);
                console.log("--------------------------");
                $(this).keyup(function() {
                    if ($this.val().length > 0) {
                        $this.css("border", "1px solid red");
                    } else {
                        $this.css("border", "1px solid #ccc");
                    }
                });
            } 
        });
        return this;
    };
}(jQuery));

When i change `options[id].minLength` to `options.minLength[id]` it works good, but i also have to change `$("#contact-form").formValidate({ contactname: { minLength: 5 }` to ` $("#contact-form").formValidate({ minLength: { contactname: 5 },` — cookieholic3, Mar 24 '13 at 17:49
I can only suggest you to set breakpoints and step through your code step by step. [Learn how to debug JavaScript code](http://www.netmagazine.com/tutorials/javascript-debugging-beginners). If `var id = 'contactname';` and `options` is the object your posted, then `options[id].minlength` will work. If it does not work for you, then your data is different and you have to find out what it is exactly. There is not much else we can do for you. — Felix Kling, Mar 24 '13 at 17:54
When I try the code (with `options[id].minLength`), the `console.log(id)` prints undefined. http://jsfiddle.net/bGVb4/ And it's because you're looping through *every* element in the form, including labels and line breaks. — JJJ, Mar 24 '13 at 17:54
@Juhana thanks! I moved `if (tagName == "INPUT") {` below `var tagName = $this[0].nodeName;` and it works correctly. Thanks again! :) — cookieholic3, Mar 24 '13 at 17:59

quietmint · Answer 1 · 2013-03-24T17:26:34.683

6

JavaScript objects also function as associative arrays.

The form options.id.minlength accesses a property whose name is the string literal "id".

Instead, you want the form options[id].minlength which accesses a property whose name is the value of the variable id.

Further, id might not have the value you think it does. Since $this appears to be a reference to #contact-form, id will have the value "contact-form". If you want to access the collection of elements inside the form, try something like $this.find('input,textarea,select').

edited Mar 24 '13 at 17:26

answered Mar 24 '13 at 17:19

quietmint

13,885
6
48
73

Also doesn't work. Firebug throws "TypeError: options[id] is undefined" – cookieholic3 Mar 24 '13 at 17:20
2

@cookieholic3: Then that means that you don't have a property on `options` with the name stored in the `id` variable. – T.J. Crowder Mar 24 '13 at 17:22
@cookieholic3 You're targeting the id of the form, not each separate element. – bfavaretto Mar 24 '13 at 17:23
this is wrapped in `.children().each()` . When i use `console.log(id)` it's prints id of form field – cookieholic3 Mar 24 '13 at 17:28
1

Any chance of seeing a full example? Either `options` doesn't have that property or it's not what you assume it is. You've done `console.log( options )` at that point, right? And apparently if the id is for example `contactname`, then testing with hardcoded `options.contactname` should work? – JJJ Mar 24 '13 at 17:31
@Juhana Yes, when I hardcoded `options.contactname.minLength` it works fine. – cookieholic3 Mar 24 '13 at 17:33
Then there's no other option than that the `id` variable is not what you think it is. Could you show the related HTML? – JJJ Mar 24 '13 at 17:35
@user113215 Yes, I am sure. This is html code: `
Name:

E-mail:

Subject:

Message:

` – cookieholic3 Mar 24 '13 at 17:39
You'll have to show a complete example that has the error. Nothing here why it shouldn't work. – JJJ Mar 24 '13 at 17:41

Using a string as reference to object

1 Answers1