[jQuery] Validate: regex that returns true elsewhere returns false inside validator method
Either I'm having a really dim Friday, or something strange is going
on. I'm trying to add a method to the Validator plugin, using the
following regex:
/^[a-z0-9-.,()'%$£*\s]+$/
So I've added this into the additional methods JS file:
jQuery.validator.addMethod(lettersnumberandadvancedpunc, function
(value, element) {
console.log(value + = + /^[a-z0-9-.,()'%$£*\s]+$/i.test
(value));
return this.optional(element) || /^[a-z0-9-.,()'%$£*\s]+$/i.test
(value);
}, Letters and punctuation only please);
Which, given a test input of, say, My £2 hat, results in the
validation error being displayed and My £2 hat = false being written
to the console.
But... unless I'm missing something, that regex is fine and should
pass that string. Certainly in a test page that I created, it seems to
work:
$(document).ready(function(){
$('#btnTest').click(function(){
console.log($('#txtWTF').val() + = +
/^[a-z0-9-.,()'%$£*\s]+$/
i.test($('#txtWTF').val()));
});
});
So what's going on? Why does my regex seem to be working elsewhere,
but not within the Validator plugin?
[jQuery] Re: Validate: regex that returns true elsewhere returns false inside validator method
Ok, it was me. Well, it was the encoding issue as discussed in the comments on http://bassistance.de/jquery-plugins/jquery-plugin-validation/ Updating code to: script type=text/javascript src=/js/jquery.validate-additional- methods.js charset=ISO-8859-1/script fixed it.
[jQuery] Re: $.browser returning 'wrong' browser version - anyone seen this UA string before?
Thanks, although it doesn't appear to be working for me.
script type=text/javascript
$(document).ready(function(){
sHTML = ;
sHTML += boxModel: + $.support.boxModel
sHTML += br/cssFloat: + $.support.cssFloat
sHTML += br/hrefNormalized: + $.support.hrefNormalized
sHTML += br/htmlSerialize: + $.support.htmlSerialize
sHTML += br/leadingWhitespace: + $.support.leadingWhitespace
sHTML += br/noCloneEvent: + $.support.noCloneEvent
sHTML += br/objectAll: + $.support.objectAll
sHTML += br/opacity: + $.support.opacity
sHTML += br/scriptEval: + $.support.scriptEval
sHTML += br/style: + $.support.style
sHTML += br/tbody: + $.support.tbody
$('#ie6').html(sHTML);
});
Every one of those properties is currently returning false for me in
both IE6 and IE7. I have no way of telling them apart. What am I doing
wrong?
[jQuery] Re: $.browser returning 'wrong' browser version - anyone seen this UA string before?
Thank you :) I'm trying to do a browser detection for client reasons :( They don't want to spend the money on coding IE6 fixes in, they're as... frustrated... with IE6 as we are, and have instructed us that any visitor reaching the site through it should be presented with a message of love, appreciation and alternative browsers. Hence my efforts to knock together a script that would direct any IE6 users to an alternative landing page.
[jQuery] $.browser returning 'wrong' browser version - anyone seen this UA string before?
No prizes for guessing it's an IE7/6 issue
I'm trying to detect IE6, with:
if (($.browser.msie == true) ($.browser.version 7)){
// fail
}
but the client has got a version of IE7 that's returning the following
UA string:
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; GTB6; Mozilla/4.0
(compatible; MSIE 6.0; Windows NT 5.1; SV1) ; .NET CLR 1.1.4322;
InfoPath.1; Creative ZENcast v1.02.12; .NET CLR 2.0.50727; .NET CLR
3.0.04506.30; .NET CLR 3.0.04506.648)
This seems to be fooling jQuery into thinking it's IE6, not 7.
Is there anything I can do about this? It just seems to be his browser
for now, but if it's a more widespread issue I need to allow for it.
[jQuery] traversing with jQuery - complex selector causing brain pain
My nav bar consists of a single UL containing LI elements that each
contain a single A.
Well, most of them do.
Some LI elements contain a further UL as well as the A: these
submenu UL elements follow the same pattern of containing LI
elements that each contain a single A.
So far, so simple.
Currently, I'm hiding all the submenu UL's on load:
$('#navigation li ul').hide();
But what I want is to only hide the submenu UL's that do NOT contain
an LI containing an A with a class of selected.
To rephrase: if any of the A elements (which are all inside an LI
element) in that particular subnav UL, have a class of selected, I
want the UL to remain expanded.
To rephrase even more: I don't want to hide the subnav containing the
current page.
Despite spending far too long examining the expressions and
traversing documentation, I can't figure out how to build a selector
statement that will encompass them.
Can you help?
[jQuery] Re: Test that at least one input element has value
If I understand you right, I think you need the groups option:
$(#myform).validate({
groups: {
username: product1 product2
}
});
AFAIK, that'll group error messages for your selected elements.
[jQuery] Validation: AJAX-based without remote?
Hi,
I need to do some AJAX-based validation to check that the email
address entered isn't in the database already, but only if the I am a
new user radio button has been checked.
I know that the Validation plugin has a remote rule, and rules that
can validate one element based on the value of another. But I couldn't
work out how to combine those two, so I tried rolling my own method:
$.validator.addMethod(non-duplicate-email-for-new-customer,
function() {
// If customer is new, check the email address isn't in the
database
already
var passValidation = true;
var sEmail = $('#txtEmail').val();
var iCustType = $('input[name=radCustomer]:checked').val();
if ((sEmail!='') (iCustType == 1)){
console.log(checking);
$.get(_ajax_emailexists.asp, { email: sEmail },
function(data){
console.log(data: + data);
passValidation = (data=='true') ? true : false;
console.log(passValidation: + passValidation);
return passValidation;
});
}
console.log(returning + passValidation);
}, This email address is taken.);
This doesn't seem to be working. Describing exactly what it's doing is
a little tricky, and I suspect that if I could, I'd be able to figure
out what was wrong with it. But I think it might be returning before
the AJAX call has completed. In any case, it constantly returns true
and the error message is constantly displayed.
Is this a simple fix or am I going about this the wrong way?
[jQuery] animated image swap
I'm trying to animate a simple image swap but it's not quite working
right. Details below, here's my code thus far:
$('#zoom_control a').click(function(){
var oImg = $('.current_page').find('img');
oImg.animate({opacity: 0}, 1000, '',function(){
var sOldSrc = oImg.attr('src');
if (sOldSrc.indexOf(_zoom.png) 0){
sNewSrc = sOldSrc.replace(_zoom.png, .png);
$(this).html('Zoom out');
}else{
sNewSrc = sOldSrc.replace(.png, _zoom.png);
$(this).html('Zoom in');
}
oImg.attr('src', sNewSrc);
oImg.animate({opacity: 1}, 1000);
});
return false;
});
So: find the image to be swapped, and animate its opacity down to 0.
When the animation finishes, use the callback function to swap the src
and animate the opacity back up to 1.
Simple enough, and I was surprised not to find an existing plugin that
does exactly that. If you know of one, you could probably save us both
some trouble :)
In any case, the problem with this one is that the image src swap
seems to screw with the opacity. It's difficult to tell what it's
doing exactly, but the image fades out ok, but then flashes back up
briefly, then switches immediately to the new image.
Any ideas?
[jQuery] [Validation] required dependency issue
Hi,
Trying to use the validation plugin (http://docs.jquery.com/Plugins/
Validation) to manage the following:
input type=radio name=q8b id=q8b_1 value=1 /
input type=radio name=q8b id=q8b_2 value=2 /
input type=radio name=q8b id=q8b_3 value=3 /
input type=text name=q8c id=q8c value= maxlength=200
size=30 /
Either a radio button must be checked, or something must be in the
text box.
If no radio button is checked and nothing is typed in the text box, I
need an error message.
If a radio button is checked AND something is typed, I need an error
message.
In addition, I want only one error message - if no radio button is
checked and nothing is typed in the text box, I don't want an error
message next to each.
I've almost got something working but I cannot for the life of me get
it to produce an error message on the too much information condition
- a radio button checked and something typed in the text box. Here's
what I've got. I appreciate that it's hideous code so any attempt to
improve it past making it work would be massively appreciated.
$(document).ready(function() {
$('#fQuestionnaire2').validate({
groups: {
q8: q8b q8c
},
rules: {
q8b:{
required : function(element) {
var rv = false;
var questionvisible =
($('input[name=q8a]:checked').val() == 2) ?
true : false;
var somethingChecked =
($('input[name=q8b]:checked').length
0) ? true : false;
var somethingEntered = ($(#q8c).val()
!= '') ? true : false;
var tooMuchInfo = (questionvisible
somethingChecked
somethingEntered) ? true : false;
var notEnoughInfo = (questionvisible
!somethingChecked !
somethingEntered) ? true : false;
if (tooMuchInfo){rv = true}
if (notEnoughInfo){rv = true}
return rv;
}
},
q8c:{
required : function(element) {
/* exactly the same code as for q8b
above - cut from post for
ease of reading/*
}
messages: {
q8b:{required: Please select a reason or enter one of
your own.},
q8c:{required: Please select a reason or enter one of
your own.}
}
});
});
[jQuery] [Validation plugin] attaching onclick validation to checkboxes before submit button is clicked?
Using the Validation plugin (http://docs.jquery.com/Plugins/
Validation/)
I've got checkboxes like this:
input type=checkbox name=q4 id=q4 value=1 /
input type=checkbox name=q4 id=q4 value=2 /
input type=checkbox name=q4 id=q4 value=3 /
input type=checkbox name=q4 id=q4 value=4 /
input type=checkbox name=q4 id=q4 value=5 /
and the following code making sure that only 3 can be chosen:
$(document).ready(function() {
$('#fQuestionnaire1').validate({
rules: {
q4: {
required: true,
maxlength: 3
}
}
});
});
This sort of works fine - when I click the form's Submit button, the
error message is displayed if more than three are selected. And from
then on, the error message is toggled on and off by my ticking the
required number of boxes. But - and here's my question - I want that
behaviour BEFORE I've hit Submit. As soon as I click that 4th
checkbox, I want the error message to appear. Currently it's happy to
let me select 4 items and then gives me the message when I hit
Submit.
I notice that the docs for the validate() onfocusout option - which
defaults to true - says Validate elements (except checkboxes/radio
buttons) on blur. Why are they excluded? It's clearly possible to do,
because it does validate onblur AFTER the submit button has fired
once. Is this work-aroundable? Am I missing something important?
Thanks :)
[jQuery] coda-slider: adding internal [prev] and [next] links
I'm using Nial Doherty's coda-slider plugin (http://plugins.jquery.com/
project/Coda-Slider), and trying to tweak it.
I'm creating several instances of the slider on a page. I'd like to
replicate the function of the 'previous' and 'next' buttons, but
inside the content panels themselves.
The code in coda-slider.1.1.1.js contains the following (for the
'previous' button):
jQuery(this).before('div class=stripNavL id=stripNavL' + j + 'a
href=#img src=/img/left_arrow.png class=rollover alt=Left
width=20 height=26 border=0 //a/div');
jQuery(div#stripNavL + j + a).click(function(){
this.blur();
if (cPanel == 1) {
var cnt = - (panelWidth*(panelCount - 1));
cPanel = panelCount;
} else {
cPanel -= 1;
var cnt = - (panelWidth*(cPanel - 1));
};
jQuery(this).parent().parent().find(div.panelContainer).animate({ left:
cnt}, settings.easeTime, settings.easeFunc);
Change the URL hash (cross-linking)...
location.hash = cPanel;
return false;
});
That seems pretty simple to me. I thought I could replicate it by
duplicating it for all my 'previous' buttons in the various sliders,
so I added this:
jQuery(a.inner_prev_version).click(function(){
if (cPanel == 1) {
var cnt = - (panelWidth*(panelCount - 1));
cPanel = panelCount;
} else {
cPanel -= 1;
var cnt = - (panelWidth*(cPanel - 1));
};
jQuery(this).parent().parent().parent().parent().parent().parent().find(div.panelContainer).animate({
left:
cnt}, settings.easeTime, settings.easeFunc);
return false;
});
Which adds the same functionality to all links in the actual panel
contents. Except it's not. What's happening is that it seems to be
calling the animation effect multiple times - I click a link, and the
panel goes flying off to God knows where.
One thing I'm suspicious of is my use of so many parent() calls to
work my way back up to the slider-wrap div. In the original click
handlers, I added:
console.log(jQuery(this).parent().parent());
and it logs one element.
But in my new click handlers, if I log the same:
console.log(jQuery(this).parent().parent().parent().parent().parent().parent());
then twelve log entries show up, all logging a slider-wrap div
element.
Clearly this is a bit complicated, and thankyou for getting this far.
I don't expect a solution - there could be so many possible causes -
but any advice would be hugely appreciated
Cheers.
