[jQuery] Re: Resetting validation rules dynamically
I see one thing I've done wrong above; the arguments to the method provided to addMethod() should be (value, element) rather than just (element). Unfortunately having changed this, it's still not working; rather than getting a silent failure, the validation check is still being applied to the element which shouldn't need it any more... Any ideas? Latest attempt: http://www.kapowaz.net/files/conditional-validation.html
[jQuery] Re: Resetting validation rules dynamically
I'm trying to modify my custom method, as follows:
$.validator.addMethod('expiryDate', function(element){
var presentDate = new Date();
var selectedDateHash = parseInt($('#select-cardpayment-
expirymonth').val(), 10) + parseInt(($('#select-cardpayment-
expiryyear').val() * 12), 10);
var presentDateHash = (presentDate.getMonth()+1) +
(presentDate.getFullYear() * 12);
return this.optional(element) || selectedDateHash >
presentDateHash;
}, parseMessageText('errors.paymentForm.cardPayment.expiryDate'));
Unfortunately this doesn't work either; in fact, in Firefox the
validation silently fails to execute /at all/ once I call
this.optional(). I can't even reference it with the Firebug console
without it stopping JS execution. What gives? I wasn't even aware such
a method existed...?
On Jun 19, 4:22 pm, "Jörn Zaefferer" <[EMAIL PROTECTED]>
wrote:
> You need to make sure that your custom method checks for optional
> elements. Check those additional methods for
> examples:http://dev.jquery.com/view/trunk/plugins/validate/additional-methods.js
>
> Jörn
>
> On Wed, Jun 18, 2008 at 2:20 PM, kapowaz <[EMAIL PROTECTED]> wrote:
>
> > Alright, I've found the bug with the above code (the callback function
> > itself doesn't return true or false; only the anonymous method inside
> > it does), and corrected it. However I've since stumbled upon another
> > problem; if any field uses a callback method to determine required
> > status, but *also* happens to use a custom validation method, it will
> > always be flagged as required.
>
> > I've augmented my demo
> > athttp://www.kapowaz.net/files/conditional-validation.html
> > to demonstrate this problem in action. Might this be a bug within the
> > plugin itself, or am I doing something else wrong?
[jQuery] Re: Resetting validation rules dynamically
Alright, I've found the bug with the above code (the callback function itself doesn't return true or false; only the anonymous method inside it does), and corrected it. However I've since stumbled upon another problem; if any field uses a callback method to determine required status, but *also* happens to use a custom validation method, it will always be flagged as required. I've augmented my demo at http://www.kapowaz.net/files/conditional-validation.html to demonstrate this problem in action. Might this be a bug within the plugin itself, or am I doing something else wrong?
[jQuery] Re: [validate] Resetting validation rules dynamically
Okay, I've refactored my code extensively to use this method instead (which does make more sense, now that I realise what it's for!)... unfortunately it still doesn't appear to work. For the purposes of demonstrating how I'm using it, I've created this test case: http://www.kapowaz.net/files/conditional-validation.html It's a massive simplification on my real working code, but the problem is still demonstrable; namely that even though credit card should only be conditionally required, it is always evaluating as required regardless of the payment method chosen.
[jQuery] [validate] Resetting validation rules dynamically
I'm currently using the jQuery Validation plugin on a page that needs
to dynamically update the particular rules you validate against
according to which options the user selects (imagine a payment page
which accepts different payment methods; you wouldn't want to validate
against credit card fields if the user isn't paying by credit card).
I've been working under the assumption that I could do this simply by
firing the $().validate(options); method again, with a new set of
arguments, but this doesn't appear to be working, and the original
rules are still being applied (leading to some annoying interactions,
as the user who said they didn't want to pay by credit card is being
told their credit card number is missing).
Essentially, within my code I have the equivalent of the following:
$('#paymentMethod input[type=radio]').change(function(){
$('#paymentMethod input[type=radio]').each(function(){
if (this.checked) {
switch ($(this).val())
{
case 'pay_cc':
$('#myForm').validate(rulesForCC);
break;
case 'pay_offline':
$('#myForm').validate(rulesForOffline);
break;
}
}
}
});
(forgive any slight errors in the above; I've redacted a large part of
it, so I may have introduced bugs).
Is there any mechanism for clearing existing rules on a form, or in
any other way allowing me to reset the rules more explicitly?
[jQuery] Re: [validate] Specifying custom highlight/unhighlight methods
On Jun 6, 4:32 pm, "Jörn Zaefferer" <[EMAIL PROTECTED]> wrote: > The latest release has a bug where unhighlight is called whenever > validating an element, instead of only when the valid-state changed. > This is fixed in the latest revision, please give that a > try:http://dev.jquery.com/view/trunk/plugins/validate/ > > Let me know if that helps. I've updated to the version in trunk, but the unhighlight method still appears to be called as soon as I focus away from the first invalid element, resetting all the error states.
[jQuery] [validate] Specifying custom highlight/unhighlight methods
I'm trying to specify a couple of custom methods for highlighting/
unhighlighting valid/invalid fields on my form, but I'm getting some
strange behaviour, which I'm not sure is due to me misunderstanding
how these methods are supposed to be implemented, or if it's just
buggy.
My custom methods look like this:
validateHighlightError = function(element) {
$(element).parent().addClass('fail');
};
validateUnhighlightError = function(element) {
$(element).parent().removeClass('fail');
};
And then within the declaration of the validate method:
$('form#signupForm').validate({
highlight: validateHighlightError,
unhighlight: validateUnhighlightError,
rules: rulesBasicSignup,
messages: messagesBasicSignup
});
(with rules and messages objects also being specified elsewhere;
they're pretty straightforward though).
Now, what I'd expect to happen is that whenever a field is determined
to be invalid (initially when the whole form is submitted, but
subsequently on keystrokes or blur) the containing element to the
field (in my case, a DL) will either have a class of 'fail' added or
removed. But this isn't what is happening; in actual fact, the class
is removed immediately on blur from the field, regardless of whether
or not it is valid. The behaviour is confusing, since the way I'm
displaying errors hides the error message itself onblur so as to
concentrate the user on a single message at a time; basically it makes
it look like the field is valid, when actually it's not at all (and
tabbing/clicking back onto it will re-add the error class to the
containing element, further confusing matters).
The documentation for these two options is somewhat ambiguous:
highlight:
How to highlight invalid fields. Override to decide which fields and
how to highlight.
unhighlight:
Called to revert changes made by option highlight, same arguments as
highlight.
It doesn't seem clear to me if this means unhighlight is just intended
to have the opposite effect of highlight, or if it's supposed to be
called when an element is no longer considered invalid (which is what
I'd hope for).
Anybody able to shed some light on the matter?
~B
[jQuery] Re: [validate] Validating against a combination of fields
On Jun 5, 5:29 pm, "Jörn Zaefferer" <[EMAIL PROTECTED]> wrote: > I've added a short explanation and an example > here:http://docs.jquery.com/Plugins/Validation#Validating_multiple_fields_... Excellent, thanks! I'll give that a go.
[jQuery] [validate] Validating against a combination of fields
I'm trying to create a custom validation rule which works based on a pair of form fields (specifically, two select elements representing month and year, which must be a date in the future). I couldn't see any examples of this pattern in use, and wanted to ask if it was even possible? How might one go about creating a custom validation rule that did this? ~B
[jQuery] Re: Determining form state without displaying error messages
Right, after further investigation I believe that the problem is deeper than simply a bug with validate (I don't think there is one; it's just not designed to do what I'm attempting). So I figured I'd write up some more of my thoughts about what I'd like to do. Essentially, for a given form, I want to be able to fire an event onchange of all input elements which tests the validity only of those inputs which have so far been touched by the user. So assuming the following scenario: Let's say that all of these fields are required, and the final two are linked passwords (they have to be the same). Let's also say that I want to change the background colour of the form element according to the form's state (red for problems, green for everything being good, and grey if the user hasn't finished entering into the fields). Now if the user types in their display name and tabs to the next field, the form as a whole - if it were submitted right then - is invalid, as they've not provided any of the other required fields. However for the purposes of flagging the form's colour, I'd not want to immediately change the colour to red, as the user hasn't even had chance to provide those fields yet. However, if the user types their display name and then enters a malformed email address (assuming I'm validating based on email address format) and tabs to the first password field, I would want to flag the form with the colour change, as even though they've not completed the form, there is a definite error on it. >From what I can tell, there is no distinction made within the validation method given above between form fields which have had user focus and had input entered into and form fields which are 'virgin'. I must admit, I'm uncertain as to the purpose of using elements[i] as the ending condition of the loop, but it appears that it will loop over every input in the form. So, what can you recommend? What might be a way of accomplishing this within what exists already, or should I try to create something independent to handle this sort of scenario?
[jQuery] [validate] Error messages displayed a second time are given block display mode
I've created a new ticket (http://dev.jquery.com/ticket/2359) with a patch for a quirky bug I've discovered, which may or may not be a bug in the .show() method of jQuery itself, or perhaps just a bug within the validation plugin. The problem is manifest when error messages are configured to be displayed within inline elements (which is the default case, using label elements) and a given error message container is displayed, hidden, then displayed a second time (an example scenario where this could happen in normal usage might be a user typing into a field which has both minimum and maximum length requirements). Once shown the second time, the element has somehow received block display mode, which appears to originate from the .show() method. I'm not absolutely certain though, so I'd be interested to hear likely possible causes. I have heard that this method is supposed to pick up the original DOM state display mode for the element, so it ought to act as a toggle rather than overriding it explicitly with display:block, so this may actually be a problem with the plugin.
[jQuery] [validate] Determining form state without displaying error messages
I'm trying to write a custom view for a form which allows the
condition of the form to be represented independently of error
messages, by updating the class on another element accordingly
whenever the form is changed. So, I have the following code:
$('#myform').change(function()
{
switch ($(this).valid())
{
case true:
$('#formstate').removeClass();
$('#formstate').addClass('ready');
$('#formstate label').text('Form is valid');
break;
case false:
$('#formstate').removeClass();
$('#formstate').addClass('errors');
$('#formstate label').text('Form has errors.');
break;
default:
$('#formstate').removeClass();
$('#formstate').addClass('incomplete');
$('#formstate label').text('Form is incomplete.');
break;
}
}
(I should add, I'm not sure if valid() can ever return anything except
true/false, so the default condition may actually be redundant; I'd
certainly like it if the method returned a third state to represent a
form that's in progress but doesn't yet have any errors).
The problem I have is that it appears that by calling the valid()
method, every field in the form is instantly validated based on its
current state, and any that are invalid have their respective error
messages displayed. This is very ugly as it will happen as soon as the
user leaves focus on the first element, causing error messages to
appear next to fields they've not yet had chance to type into (for
instance, I have a pair of password elements for a user registration
form, whose values must be identical - as soon as the first password
element loses focus, an error is displayed saying that the passwords
don't match).
What I'd like is to be able to sample the state of the form /so far/ -
i.e. only validate elements which have received input, and ignore the
rest. It would be even better if the method could return the third
state for incomplete so that forms 'in progress' aren't flagged as
invalid (and they're not strictly valid either).
So, suggestions? Is this something the Validation plugin supports
already? Or will it need to be modified to support it?
[jQuery] Re: [validate] Adding custom behaviours following validation
Excellent! That works nicely. The method names might benefit from being a bit more obvious (and documented on docs.jquery.com?) though. Pass and Fail come to mind.
[jQuery] [validate] Adding custom behaviours following validation
I'm looking to modify the markup surrounding my form elements once validation has taken place so as to indicate success/failure with a particular input element's contents, and I'm wondering if the Validate plugin can do this without any modification? To give an example, imagine I have the following markup: Username Password Confirm password Adding validation rules to this using the plugin is very easy, and since by default it will add a class of error to any elements with invalid values, I can add a highlight rule for inputs easily enough. However, what I'd like to do is set a class of 'pass' or 'fail' to the containing DD element, so that I can indicate which fields have been successfully filled in. If I was doing this in a nice jQuery-esque fashion, I'd hook in some functionality to addClass/removeClass using a custom event, but as far as I can see this plugin doesn't provide any custom events to handle this (unless I'm missing something blindingly obvious?). Can anybody suggest a route to achieving what I've got in mind that doesn't involve hacking the plugin itself?
