0

I'm using the jquery validation in a somewhat complicated form. The validation rules are added in code by assigning classes to form-fields, but I can't seem to get it working with an extra parameter. I'm not having much luck with the jQuery documentation I'm afraid.

Below is an example of what does work for me, and what doesn't, the example is obviously not very useful.


Working (shows error on anything but a)

(pseudo-code)

$fieldXclasses = "myrule";

generated HTML

<input id="x" name="x" value="fromdatabase" class="myrule error" type="text">

js method:

jQuery.validator.addMethod("myrule", function(value, element) { 
    return this.optional(element) || /^a$/.test(value);
}, "Please enter 'a'");  

It has "error" as extra class as 'fromdatabase' is obviously not a, so it fails the "myrule" function. When I type a in the field it changes to class="docnmr valid" as expected. My conlcusion from this is that my validation set-up is working for the simple cases, so I don't need to look for errors in how I load the validation-plugin.


Not working:

(pseudo-code)

$fieldXclasses = "myrule:1";

generated HTML

<input id="x" name="x" value="fromdatabase" class="myrule:1 valid" type="text">

js method:

jQuery.validator.addMethod("myrule", function(value, element,param) { 
    return this.optional(element) || /^a$/.test(value);
}, "Please enter 'a'");  

Now the initial state is wrong from start: it should be error instead of valid, as it doesn't meet the requirements. I'm assuming the class myrule:1 isn't parsed as something that calls the myrule function with 1 as parameter. But this is what I thought was the way to add a parameter, though I cannot find the correct method very easily in the jquery-documentation.

Can anyone enlighten my on how to add an extra paramter?

For background: in the end the goal is to use another fields value as parameter, because they depend on eachother. Another option might certainly be to forget about the the parameter and us the this object in the rule to find the correct field. Not sure if that's feasible though.

4
  • Is this going to end up a "dynamic" form in the sense that the amount of possible elements is not easily dealt with? Why not lookup the values you are aluding to from element if this is not the case? Commented Aug 28, 2012 at 10:01
  • I'm not sure what you mean. The regex in the function depends on a certain field, but the possible values it depends on are limited. I'd really like to just pass the information as a parameter or something, because otherwise a form would have some sort of "magic id" where one of the validations is dependend on. This would be ok for just one form, but if you re-use the function, it's kinda tricky to force an element with a certain name so the validation works. Or do you know a way around that? Commented Aug 28, 2012 at 10:06
  • What came to my mind was either a structure holding the element's it would be dealing with.This could be dealt with via a simple table being populated with this data.Really would just have to write an addVFormLookup(e_form, e1, e2) for each of your form elements needed. Then just have a function to find the correct element from that. Commented Aug 28, 2012 at 10:18
  • Yes, but if the dependency is a little bit different, e.g. not a straight lookup, a parameter would be much cleaner I think. You can add a server-side caclulation, or something that javascript has filled, all calling the same basic validation. The point is for me that i'd like to find out the parameter not inside the validation, but before calling it, as the validation shouldn't be subject to much change for each form that uses it. (Hmm, sorry if i'm not really clear :) ) Commented Aug 28, 2012 at 10:28

1 Answer 1

2

You have two choices, neither of which involve using the class attribute. You can just specify an attribute and value like myrule="1" in your input, and that will do what you want:

<input id="x" name="x" value="fromdatabase" myrule="1" type="text"> 

Alternatively, in your validate call, you can specify a rule like this:

$('form').validate({
 ...
 rules: {
    ...
    x: {
       myrule: 1
    },
    ...
 }
});

For a simple example of the first way of doing it, see here: http://jsfiddle.net/ryleyb/2E6k9/

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.