Dynamically generating controls/javascript

[file-mongerMember]

I work in asp.net and design forms which pull most of the controls (textboxes, labels, dropdownlists, radiobuttonlists, checkboxlists, etc..) from database records. I have functions that will create any control anyplace on the form. In order to use your controls I would HAVE to be able to inject the jquery into the page dynamically.
The first two that I would be interested in are the popup alert, the validators, and the dropdownlist (I have another pending post in that forum too).
So for example: I would need to inject jqxAlert.alert(‘Alert Message’); .
For the validators I would need to inject the rules like:

rules: [ { input: ‘#userInput’, message: ‘Username is required!’, action: ‘keyup, blur’, rule: ‘required’ }, { input: ‘#userInput’, message: ‘Your username must be between 3 and 12 characters!’, action: ‘keyup’, rule: ‘length=3,12’ }, { input: ‘#realNameInput’, message: ‘Your real name must contain only letters!’, action: ‘keyup’, rule: ‘notNumber’ }, { input: ‘#realNameInput’, message: ‘Your real name must be between 3 and 12 characters!’, action: ‘keyup’, rule: ‘length=3,12’ }, { input: ‘#birthInput’, message: ‘Your birth date must be between 1/1/1900 and 1/1/2012.’, action: ‘valuechanged’, rule: function () { var date = $(‘#birthInput’).jqxDateTimeInput(‘value’); var result = date.dateTime.getFullYear() >= 1900 && date.dateTime.getFullYear() <= 2012; return result; }

Do you know of any reason I woulk not be able to do this? I am very proficient at dynamically generated strings, so the difficulty of generating the above code is not a concern, but more of how the scripts behave across postbacks. What happens if one of the controls is not on the page when I tell it to validate it? does it fail silently or throw an exception? Are there any known conflicts with Telerik Controls? We regularly use the Radgrid and the AjaxManager and RadWindows.

Thanks for your time, am looking forward to your response, I have been searching for new solutions to validation and popups!

file-monger

[Peter StoevKeymaster]

Hi file-monger,

Here’s how to dynamically set validator rules:

       // initialize validator.
            $('#testForm').jqxValidator({
                theme: theme
            });
            $('#testForm').jqxValidator({ rules: [
                    { input: '#userInput', message: 'Username is required!', action: 'keyup, blur', rule: 'required' },
                    { input: '#userInput', message: 'Your username must be between 3 and 12 characters!', action: 'keyup', rule: 'length=3,12' },
                    { input: '#realNameInput', message: 'Your real name must contain only letters!', action: 'keyup', rule: 'notNumber' },
                    { input: '#realNameInput', message: 'Your real name must be between 3 and 12 characters!', action: 'keyup', rule: 'length=3,12' },
                    { input: '#birthInput', message: 'Your birth date must be between 1/1/1900 and 1/1/2012.', action: 'valuechanged', rule: function () {
                        var date = $('#birthInput').jqxDateTimeInput('value');
                        var result = date.dateTime.getFullYear() >= 1900 && date.dateTime.getFullYear() <= 2012;
                        return result;
                    }
                    },
                    { input: '#passwordInput', message: 'Password is required!', action: 'keyup', rule: 'required' },
                    { input: '#passwordInput', message: 'Your password must be between 4 and 12 characters!', action: 'keyup', rule: 'length=4,12' },
                    { input: '#passwordConfirmInput', message: 'Password is required!', action: 'keyup', rule: 'required' },
                    { input: '#passwordConfirmInput', message: 'Passwords doesn\'t match!', action: 'keyup, focus', rule: function (input) {
                        if (input.val() === $('#passwordInput').val()) {
                            return true;
                        }
                        return false;
                    }
                    },
                    { input: '#emailInput', message: 'E-mail is required!', action: 'keyup', rule: 'required' },
                    { input: '#emailInput', message: 'Invalid e-mail!', action: 'keyup', rule: 'email' },
                    { input: '#ssnInput', message: 'Invalid SSN!', action: 'valuechanged, blur', rule: 'ssn' },
                    { input: '#phoneInput', message: 'Invalid phone number!', action: 'valuechanged, blur', rule: 'phone' },
                    { input: '#zipInput', message: 'Invalid zip code!', action: 'valuechanged, blur', rule: 'zipCode' },
                    { input: '#acceptInput', message: 'You have to accept the terms', action: 'change', rule: 'required', position: 'right:0,0'}]
            });

We are not aware of conflicts with other third-party software.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[rfladebo2Member]

Hello,

I have a question related to file-monger. File-monger asks, “What happens if one of the controls is not on the page when I tell it to validate it? does it fail silently or throw an exception?”

In my experience, jqxValidator fails silently if one of the controls is not on the page but a rule is present. This has caused some consternation and wasted time. There are cases when it is reasonable to have a rule present to cover cases which may not always occur on a dynamically generated form, so I don’t consider this a coding error.

My question is: Is there any way I can tell validator to ignore rules if a control is not present? And is there a way to make it more verbose in terms of revealing errors so troubleshooting is easier and more straightforward?

Thank you.

[Peter StoevKeymaster]

Hi rfladebo2,

There’s no built-in way to make the jqxValidator to ignore rules. It always validates the rules from its rules array depending on the settings set when the jqxValidator constructor is called.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts