[jQuery] using depends method with Validate() plugin
Hi,
I am using the Validate() plugin for various forms and I run into
this issue with the depends method on various places.
So far I found only two references to dealing with depends:
http://docs.jquery.com/Plugins/Validation/validate
$(.selector).validate({
rules: {
contact: {
required: true,
email: {
depends: function(element) {
return $(#contactform_email:checked)
}
}
}
}
})
http://dev.jquery.com/ticket/2456
billingAddress: {
required:true,
minlength:5
equalTo: {
param: #shippingaddress,
depends: #compare:checked
}
}
first of all non of these work for me so there must be something
going on with them. but my real problem is that I want validation
depending on fields other then checkboxes.
1. I only want to require zip code if the selected country from a
drop down list is USA.
something like this:
zip: {
required: {
depends: #countrycode:1
}
},
where countrycode represents the country selector and 1 is the value
for USA
2. in a from for password change I only want to require current
password if new password is entered.
something like this:
current_password: {
minlength: 6,
required: {
depends: #new_password
}
},
with this one I'd assume that if new_password is not empty then set
the rule.
I also found this page:
http://dev.distilldesign.com/log/2008/mar/16/extending-jquery-form-
validation-plugin/
http://lab.distilldesign.com/jquery-form-validation/extending/
this one works, though he uses checkboxes as well. here he basically
extends the validate() plugin:
$.validator.addMethod('dependsOn', function (value, el, params) {
return !$(params.el).is(params.being) ||
$(el).is(':filled');
}, 'This field is required.');
then he uses the new method in the rule:
emailDependent: {
dependsOn: {
el: '#emailMethod',
being: ':checked'
},
email: true
},
I am not a javascript wizard so this method writing is getting my
head dizzy. Can anyone tell me if there is a simple way of using
depends in rules for validate() plugin?
Thanks,
Luke
[jQuery] Re: using depends method with Validate() plugin
OK
this works:
current_password: {
minlength: 6,
required: {
depends: #new_password:filled
}
},
I still need to figure out how to get a value recognized:
zip: {
required: {
depends: #countrycode:'1'
}
},
Luke
On Dec 2, 2008, at 11:44 AM, luke adamis wrote:
Hi,
I am using the Validate() plugin for various forms and I run into
this issue with the depends method on various places.
So far I found only two references to dealing with depends:
http://docs.jquery.com/Plugins/Validation/validate
$(.selector).validate({
rules: {
contact: {
required: true,
email: {
depends: function(element) {
return $(#contactform_email:checked)
}
}
}
}
})
http://dev.jquery.com/ticket/2456
billingAddress: {
required:true,
minlength:5
equalTo: {
param: #shippingaddress,
depends: #compare:checked
}
}
first of all non of these work for me so there must be something
going on with them. but my real problem is that I want validation
depending on fields other then checkboxes.
1. I only want to require zip code if the selected country from a
drop down list is USA.
something like this:
zip: {
required: {
depends: #countrycode:1
}
},
where countrycode represents the country selector and 1 is the value
for USA
2. in a from for password change I only want to require current
password if new password is entered.
something like this:
current_password: {
minlength: 6,
required: {
depends: #new_password
}
},
with this one I'd assume that if new_password is not empty then set
the rule.
I also found this page:
http://dev.distilldesign.com/log/2008/mar/16/extending-jquery-form-
validation-plugin/
http://lab.distilldesign.com/jquery-form-validation/extending/
this one works, though he uses checkboxes as well. here he basically
extends the validate() plugin:
$.validator.addMethod('dependsOn', function (value, el, params) {
return !$(params.el).is(params.being) ||
$(el).is(':filled');
}, 'This field is required.');
then he uses the new method in the rule:
emailDependent: {
dependsOn: {
el: '#emailMethod',
being: ':checked'
},
email: true
},
I am not a javascript wizard so this method writing is getting my
head dizzy. Can anyone tell me if there is a simple way of using
depends in rules for validate() plugin?
Thanks,
Luke
[jQuery] Re: using depends method with Validate() plugin
Thanks!
I found the page as well:
http://docs.jquery.com/Plugins/Validation/Methods/required#dependency-
expression
I wonder how I could miss this page.
Luke
On Dec 2, 2008, at 2:05 PM, Jörn Zaefferer wrote:
Either depends: #countrycode[value=1] or depends: function() {
return $(#countrycode).val() == '1'; }
Jörn
On Tue, Dec 2, 2008 at 8:42 PM, luke adamis [EMAIL PROTECTED]
wrote:
OK
this works:
current_password: {
minlength: 6,
required: {
depends:
#new_password:filled
}
},
I still need to figure out how to get a value recognized:
zip: {
required: {
depends:
#countrycode:'1'
}
},
Luke
On Dec 2, 2008, at 11:44 AM, luke adamis wrote:
Hi,
I am using the Validate() plugin for various forms and I run into
this issue with the depends method on various places.
So far I found only two references to dealing with depends:
http://docs.jquery.com/Plugins/Validation/validate
$(.selector).validate({
rules: {
contact: {
required: true,
email: {
depends: function(element) {
return $(#contactform_email:checked)
}
}
}
}
})
http://dev.jquery.com/ticket/2456
billingAddress: {
required:true,
minlength:5
equalTo: {
param: #shippingaddress,
depends: #compare:checked
}
}
first of all non of these work for me so there must be something
going on with them. but my real problem is that I want validation
depending on fields other then checkboxes.
1. I only want to require zip code if the selected country from a
drop down list is USA.
something like this:
zip: {
required: {
depends: #countrycode:1
}
},
where countrycode represents the country selector and 1 is the value
for USA
2. in a from for password change I only want to require current
password if new password is entered.
something like this:
current_password: {
minlength: 6,
required: {
depends: #new_password
}
},
with this one I'd assume that if new_password is not empty then set
the rule.
I also found this page:
http://dev.distilldesign.com/log/2008/mar/16/extending-jquery-form-
validation-plugin/
http://lab.distilldesign.com/jquery-form-validation/extending/
this one works, though he uses checkboxes as well. here he basically
extends the validate() plugin:
$.validator.addMethod('dependsOn', function (value, el, params) {
return !$(params.el).is
(params.being) ||
$(el).is(':filled');
}, 'This field is required.');
then he uses the new method in the rule:
emailDependent: {
dependsOn: {
el: '#emailMethod',
being: ':checked'
},
email: true
},
I am not a javascript wizard so this method writing is getting my
head dizzy. Can anyone tell me if there is a simple way of using
depends in rules for validate() plugin?
Thanks,
Luke
[jQuery] Re: using depends method with Validate() plugin
Is there a reason for this to not work?
other_product_interest: {
required: #product_interest[0]:checked
},
product_interest[] is a list of checkboxes, if user picks 'other' ,
#product_interest[0] then user must fill the text filed:
other_product_interest.
Thanks,
Luke
[jQuery] Re: using depends method with Validate() plugin
Thanks,
That did it.
Now I have another issue:
these checkboxes must be names like an array:
product_interest[]
but in the rules I can't have this:
product_interest[]: required,
I know I can insert code in HTML:
class=required
but I would rather have it in the rules.
Is there any way to do that?
L.
On Dec 3, 2008, at 11:30 AM, Jörn Zaefferer wrote:
I guess you have to escape that ID: jQuery interprets that as element
with id product_interest and an attribute named '0'.
Jörn
On Wed, Dec 3, 2008 at 5:24 PM, luke adamis [EMAIL PROTECTED]
wrote:
Is there a reason for this to not work?
other_product_interest: {
required:
#product_interest[0]:checked
},
product_interest[] is a list of checkboxes, if user picks 'other' ,
#product_interest[0] then user must fill the text filed:
other_product_interest.
Thanks,
Luke
[jQuery] Re: IE problem
test page:
http://kitchenshop.ebeacon.net/catalog/
thanks,
luke
On Dec 4, 2008, at 6:29 PM, Michael Geary wrote:
It doesn't seem to work for me in Firefox either.
For some reason, $('.promotion_content').length evaluates to 0.
Oh! I get it. I'm missing the HTML code!
Sorry, just kidding around with you. :-)
But seriously, it's pretty hard to guess what might be wrong
without a test
page to look at.
The one thing I can suggest from looking at the JS code alone is that
there's a big chunk of duplicate code that could be removed. That's
unlikely
to be related to the IE problem, though. So put up a test page and
someone
can probably give you some ideas.
-Mike
From: luke adamis
Why isn't tis working in IE?
$(document).ready(function(){
//tabber
var e = $('.promotion_content').length;
var n = Math.floor(Math.random()*e);
$('#promotion_holder .promotion_content').hide();
$('#promotion_holder .promotion_content:eq('+n+')').show();
$('#promotion_holder #promotion_navigation ul li
a:eq('+n
+')').addClass('selected');
$('#promotion_holder #promotion_navigation #next
a').click (function () {
if (n == e-1) { n = 0; } else { n = n+1; }
$('#promotion_holder .promotion_content').hide();
$('#promotion_holder #promotion_navigation
ul li a').removeClass('selected');
$('#promotion_holder
.promotion_content:eq('+n+')').fadeIn('slow');
$('#promotion_holder #promotion_navigation
ul li a:eq('+n
+')').addClass('selected');
return false;
});
$('#promotion_holder #promotion_navigation
#previous a').click (function () {
if (n == 0) { n = e-1; } else { n = n-1; }
$('#promotion_holder .promotion_content').hide();
$('#promotion_holder #promotion_navigation
ul li a').removeClass('selected');
$('#promotion_holder
.promotion_content:eq('+n+')').fadeIn('slow');
$('#promotion_holder #promotion_navigation
ul li a:eq('+n
+')').addClass('selected');
return false;
});
var tab_content = $('#promotion_holder .promotion_content');
$('#promotion_holder #promotion_navigation ul li
a').click (function () {
tab_content.hide().filter(this.hash).fadeIn('slow');
$('#promotion_holder #promotion_navigation
ul li a').removeClass('selected');
$(this).addClass('selected');
n = $(this).attr('name') - 1;
return false;
}).filter(':first').hover();
});
both the random selection and the clicking on the next
previous buttons are messed up in IE6, IE7. if I set var e =
$ ('.promotion_content').length; to a fixed number, the
script works.
but I need to count the elements somehow first.
thanks,
luke
[jQuery] Re: IE problem
OK I figured it out.
There is nothing wrong with my script.
This website is developed in ShopSite. http://shopsite.com/
ShopSite uses templates to build static pages. In order to cross link
and to be able to search ShopSite places anchors all over the HTML.
For some reason for these anchors it duplicates the ids and classes I
put into the template. since JQuery relies on classes and ids of DOM
elements we get a conflict there.
Safari, Firefox are smart enough to deal with the conflict. IE6 and
IE7 mess up.
L.
On Dec 5, 2008, at 10:12 AM, luke adamis wrote:
test page:
http://kitchenshop.ebeacon.net/catalog/
thanks,
luke
On Dec 4, 2008, at 6:29 PM, Michael Geary wrote:
It doesn't seem to work for me in Firefox either.
For some reason, $('.promotion_content').length evaluates to 0.
Oh! I get it. I'm missing the HTML code!
Sorry, just kidding around with you. :-)
But seriously, it's pretty hard to guess what might be wrong
without a test
page to look at.
The one thing I can suggest from looking at the JS code alone is that
there's a big chunk of duplicate code that could be removed.
That's unlikely
to be related to the IE problem, though. So put up a test page and
someone
can probably give you some ideas.
-Mike
From: luke adamis
Why isn't tis working in IE?
$(document).ready(function(){
//tabber
var e = $('.promotion_content').length;
var n = Math.floor(Math.random()*e);
$('#promotion_holder .promotion_content').hide();
$('#promotion_holder .promotion_content:eq('+n+')').show();
$('#promotion_holder #promotion_navigation ul li
a:eq('+n
+')').addClass('selected');
$('#promotion_holder #promotion_navigation #next
a').click (function () {
if (n == e-1) { n = 0; } else { n = n+1; }
$('#promotion_holder .promotion_content').hide();
$('#promotion_holder #promotion_navigation
ul li a').removeClass('selected');
$('#promotion_holder
.promotion_content:eq('+n+')').fadeIn('slow');
$('#promotion_holder #promotion_navigation
ul li a:eq('+n
+')').addClass('selected');
return false;
});
$('#promotion_holder #promotion_navigation
#previous a').click (function () {
if (n == 0) { n = e-1; } else { n = n-1; }
$('#promotion_holder .promotion_content').hide();
$('#promotion_holder #promotion_navigation
ul li a').removeClass('selected');
$('#promotion_holder
.promotion_content:eq('+n+')').fadeIn('slow');
$('#promotion_holder #promotion_navigation
ul li a:eq('+n
+')').addClass('selected');
return false;
});
var tab_content = $('#promotion_holder .promotion_content');
$('#promotion_holder #promotion_navigation ul li
a').click (function () {
tab_content.hide().filter(this.hash).fadeIn('slow');
$('#promotion_holder #promotion_navigation
ul li a').removeClass('selected');
$(this).addClass('selected');
n = $(this).attr('name') - 1;
return false;
}).filter(':first').hover();
});
both the random selection and the clicking on the next
previous buttons are messed up in IE6, IE7. if I set var e =
$ ('.promotion_content').length; to a fixed number, the
script works.
but I need to count the elements somehow first.
thanks,
luke
[jQuery] validate plugin date()
hello all, I have a date filed that needs to be validated only for one type of date format: mm/dd/yyy. http://bassistance.de/jquery-plugins/jquery-plugin-validation/ the validate plugin's date() method validates all sorts of date formats. is there a way to restrict that to only one format? do I need to write my own rule for that? thanks Luke
[jQuery] working with appended elements
first time I am working with append().
If I create an element with append():
$('#box').append('div id=hidemeHide Me/div');
then I need that element to be clickable.
$('#hideme').click.function() {
$(this).fadeOut();
};
but it is not responding. I assume because it wasn't there when the
script was initially loaded.
any idea what is the solution here? or how can I create elements that
later I can use?
thanks,
Luke
[jQuery] Re: working with appended elements
never mind
livequiery did the trick.
L.
On Jan 6, 2009, at 11:08 AM, Luke Adamis wrote:
first time I am working with append().
If I create an element with append():
$('#box').append('div id=hidemeHide Me/div');
then I need that element to be clickable.
$('#hideme').click.function() {
$(this).fadeOut();
};
but it is not responding. I assume because it wasn't there when the
script was initially loaded.
any idea what is the solution here? or how can I create elements
that later I can use?
thanks,
Luke
[jQuery] [validate plugin] contain number
Hello, I need to validate password fields. I got this list of requirements what a password can be, among them: it has to contain numbers. How can I validate if the password contains numbers or not. I thought the built in numbers() method would do it for me. but it seems it requires the string to be all numbers. I thought the digit() would require all characters to be numbers and the numbers() would check if the string has numbers. Thanks for help, Luke
