Hello,

Seems that dowload link doesn’t work… I would like evaluate the validation plugin it seems very impresive!!!

Hi Oscar,

just fixed the download, sorry for the inconvience.

Robust, flexible, and built with JQuery. Excellent work, and nice upgrade!

Congrats for this great jQuery plugin. Only one question: how to insert validation rules for dependent fields? Example: a form haves 2 radio options: single and married. If user checks married a select field with numbers from 0 to N is toggled. That 2 fields: married and numbers of childs need to validate for your dependency. Suggestions? Cheers.

Hi Marco,

so far that isn’t supported. Thanks for bringing it up, your example is a good starting for implementing this support (that’s why its still alpha).

So, could you please explain in more detail how the validation should work?

Once married is chosen, the user has to select something in the select field? Is that it? Or something else?

Already got an idea how to implement that

Hi Jorn, I’m sending you a regex to validate in Brazilian(Portugal, Argentina and another South America countries) dates:

	dateBR: function(value, element) {
		return !v.methods.required(value, element) || /^(?:(?:(?:0?[1-9]|1\d|2[0-8])\/(?:0?[1-9]|1[0-2]))\/(?:(?:1[6-9]|[2-9]\d)\d{2}))$|^(?:(?:(?:31\/0?[13578]|1[02])|(?:(?:29|30)\/(?:0?[1,3-9]|1[0-2])))\/(?:(?:1[6-9]|[2-9]\d)\d{2}))$|^(?:29\/0?2\/(?:(?:(?:1[6-9]|[2-9]\d)(?:0[48]|[2468][048]|[13579][26]))))$/.test(value);
	},

Works fine for example: 15/05/2006 OK and 05/15/2006 ERROR

Best regards

Question:

I have this code:

function createValidation() {
jQuery(document).ready(function() {
	jQuery("#DB").validate( {
		event: "custom",
		rules: {
			tFieldRef: { required: true }
		},
		messages: {tFieldRef: "*"}
	});
  });
}

When I load the page I execute this method, then I would like have a button to execute the validation:

Thanks in advanced and Congratulations for this plugin!!!

@Marco: Thanks for the code. I’m thinking about either adding it to the library or providing a little repository of additional validation methods. Currently I tend to the latter, so once someone needs a method that isn’t in the distribution, and can get if from the repository.

@Oscar: Your example is a bit incomplete. I’d need to see the HTML you are using, and a more detailed explanation about what you’d like to achieve.

Hi Jorn

My html is:
.
.

function createValidation() {
jQuery(document).ready(function() {
jQuery(“#DB”).validate( {
event: “custom”,
rules: {
tFieldRef: { required: true }
},
messages: {tFieldRef: “*”}
});
});
}

function validateForm()
{
????????????????? how EXECUTE VALIDATION FORM

}

createValidation()

datos basicos:
Referencia:

——————————————————-

The objective is:

a) Create the validators when page is load.
b) Have a button in order to execute the validation and depending of the result do one action or another.

I don’t know if the explanation is clear enought .

Thanks for your help.

@Oscar: Sorry, I need some more to understand your problem. It seems like something got lost from your comment. Could you try to upload an example page somewhere? Or send a mail? Whatever works for you.

Jorn,

validation plugin docs present an example to use errorClass attribute. I’m using this simple script to show error messages in red colour:
.errormsg {
FONT-WEIGHT: bold; COLOR: #b80000
}
And jQuery:
$(“#frm”).validate({
event: “keydown”,
errorClass: “errormsg”,

but when plugin validates my form and display error message in black colour. What’s wrong? It’s possible to insert style inside validate plugin?

Cheers

is it possible for the messages to be graphics instead of text? so instead of a message saying “invalid email” it can be a check-mark graphic next to it?

You already thought about validating a input file? Only allowing some extensions.

Only an idea.

@Marco: That is a bug in the plugin. Until I release the fix, you could just use the default “error” class, eg:

label.error {
  font-weight: bold;
  color: #b80000;
}

@andrew: I saw some forms on the internet that use just that, and thought about how to implement support. Haven’t come up with anything yet, any ideas are welcome.

@Leonardo: That could be achieved with a custom method, something like this:

jQuery.validator.addMethod("accept", function(value, element, param) {
  return value.match(new RegExp("." + param + "$"));
});

rules: {
  fileupload: { accept: "(jpe?g|gif|png)" }
}

I guess you can’t avoid passing around some regular expressions.

i toyed around with using css to place a background image and positioning to have it over a graphic of an accepted icon, that way with it is correct the error graphic would disappear and leave the correct one showing.. the only problem was that it would only appear if there was text in the error field in the javascript config section and it would only be as long and tall as the text itself.. i would imagine if you can make the error a html image tag instead of a text string that would work out a lot better.

the following is not correct code but to give an idea..

instead of a text string:
email: “Please enter a valid email address”

make it a html image tag:
email: “<img …”

@andrew: That sounds like an easy solution. Did you try that out? The error-label creation uses the html() method to set the content of the label, so it should already accept HTML messages.

i havn’t done too much testing with it yet, but i do know that i cant simply put the image code into the config section..

messages: {
email: CODE
}

i was hoping for an easy way to do it without modifying your code if possible..

i got it to work.. it does something weird though.. the first key down it shows the graphic but on the second and all following it shows the actual image code as a text string and not the graphic itself..

great plugin Jörn. I’m moving all future projects to this. No crap in my html! yes!

Is there a collection of rules extensions around yet?

Thanks for all the work.

Will

@andrew: Ok, I know how to fix that. Need to use html() instead of text() when updating the generated label.

@will: So far I’ve got nothing organized, but plans to do so. I’d start by just putting every additional method I get back into one file, so you can pick what you need. The problem so far: I got a few methods, but no documentation or examples, so its nearly easier to write the method yourself instead of figuring out what it actually does.

thanks.. works perfectly now.. just a thought though, i dont think it would hurt anything to make it html by default would it? that way you can advertise the default function of using graphics as indicators..

Hi, excellent plugin, thank you very much.

I’ve spent the last three hours tearing my hair out trying to figure out why my very simple form would work in FF2 but not in IE6… I tried everything and finally had to break it down line by line and discovered that it was my content type for the page. It was originally utf8 now it’s “text/html; charset=ISO-8859-1″ and now it works perfectly. Thought that this might save someone some time.

Best, Mark.

Thanks for the comment, Mark.

Indeed, there were reports about problems with IE6 while FF worked fine. Maybe it was the same issue.

Hi,
Great work.
Just a question: it seems to me that addErrors function doesn’t exist. Am i wrong?

Phil

I am also seeing the UTF-8 vs. ISO-8859-1 error in IE6.

The problem appears to be that the url regex on line 923 fails when the content type is set to UTF-8:

url: function(value, element) {
return !jQuery.validator.methods.required(value, element) || /^(https?|ftp):\/\/[A-Z0-9](\.?[A-Z0-9ÄÜÖ][A-Z0-9_\-ÄÜÖ]*)*(\/([A-Z0-9ÄÜÖ][A-Z0-9_\-\.ÄÜÖ]*)?)*(\?([A-Z0-9ÄÜÖ][A-Z0-9_\-\.%\+=&ÄÜÖ]*)?)?$/i.test(value);
},

Removing the characters ÄÜÖ “solves” the problem; or, setting the content type to ISO-8859-1 also “solves” the problem.

Perhaps someone with more knowledge of IE/JS/regex/encodings can explain?

Great plugin, btw — thanks for it.

Perhaps I’m doing something wrong, but I would like to validate input fields onChange rather than onBlur. But whenever I use event: change I get an error “change is undefined”.

Forget it, I realized I wasn’t passing the event as a string. So, instead of :
event: change

I should have be doing:
event: 'change'

Lack of sleep…

@phil: As replied on the mailing list, use showErrors() directly.

@Greg: Thanks for investigating this. I guess the trouble is this: jquery.validate.js is encoded as ISO-8859-1. The browser uses the encoding of the page if it isn’t specified for the script.

So a workaround specifies the encoding of the script by setting the charset (eg. <script type=”text/javascript” src=”jquery.validate.js” charset=”ISO-8859-1″></script>.

It shouldn’t be a big problem to encode the source file in UTF-8, that should prevent the problem.

I have a form I wish to reset using resetForm() from the Form plugin. I find that I can get the actual form fields to reset, but the error messages do not. How do I reset the error messages without reloading the page?

@skube: Try this:

var v = $(...).validate();
// code to reset form
$(...).resetForm();
v.prepareForm();
v.hideErrors();

Depending on the state of the validation you can skip the call to prepareForm().

Please let me know if that works for you. I'd then document those methods.

It basically works, in that the error labels get hidden, but the input fields themselves are still outlined (in my case red) indicating an error with each field.

Well, I guess its not hard to work around that, too. But I that deserves a better solution, I’ll look into it.

Update: I’ve released beta 2, it includes a new validator method resetForm(). That should do exactly what you need, you don’t even need to call the form plugin’s resetForm().

[...] The validation plugin beta 2 is out! If you are already working with it: A update is recommended. If not, and you need client-side validation (pure or mixed with AJAX requests), check it out. [...]

Hi, Jorn…

I’ve been working with your previous verison of the Validation plug-in and it’s nice to see the updates. (Although, at this point I’m not sure what they all mean… )

I’m interested in being able to use client-side validation via your plug-in, but also want to be able to use server-side validation with ColdFusion for extended application.

I notice in your AJAX example, that you use a .php file for the back-end (server-side?) code. Would I be able to use a ColdFusion file (.cfm) in the same manner as you use the .php file?

Thanks,

Rick

@Rick: For that to work your cfm has to return JSON in the same format as in the example, that should be no problem.

thanks for you code,
but I a request. In form i fill the error data the validate will show error message. how did you add a method to show pass message when i fill the true info…thanks

@huangminghu: Could you provide some more details about what you’d like to achieve? Maybe post a demo page?

Here’s a situation for you problem solvers out there:

I am using the form plugin to submit my contact form and update an element on contact.php with the response. The validation plugin keeps the form from being submitted while errors are present.

It works as expected in Firefox and Internet Explorer when contact.php is viewed directly. Validation catches errors until the form is submitted correctly; and the heading of contact.php changes from “Contact Us” to “Thanks for your message” on success.

However, when I use jQuery’s load() to put contact.php in a div on another page, validate() and ajaxSubmit() no longer work in Internet Explorer. The window redirects to the form’s action page (form.php) and displays the success message there.

Has anyone tried something like this or have any advice? Thanks in advance!

Does contact.php contain the JavaScript to setup validaiton and form submit?

I guess the key is to seperate those scripts from the markup, or rather from the pages you use. So basically you’d either show contact.php directly and execute those scripts on DOM ready, or you include that page later and execute those scripts after the markup is loaded.

I’m just wondering if there is a way to only validate those forms which are currently shown. I have a page which has several forms most of them hidden until the user clicks a button to display any one particular form. At that point, I wish to validate only that one showing form. Perhaps something like $(“form:visible”).validate({ … }) which doesn’t seem to work…

@skube: Could you detail that some more? Do you hide actual form elements or only parts of a form?

If you have more then one form element or can change your structure to use them, you shouldn’t have any problem at all.

If you hide only parts of one big form it is a bit less trivial. One possible approach would be to modify all required-rules to apply only when the surrounding “subform” is visible.

If that doesn’t help you: Please provide a test page for me to look at.

I can’t really put together a test page right now, but I have emailed you a link to the dev site. I have several separate forms dynamically generated but all individually hidden. They are all separate forms, each with a unique form ID. If the user opts to fill one out, it gets displayed and validation show occur.

How would you intercept the validation with a regular button

instead of a submit button.

The plugin seems to have a hook on the onsubmit event.

@Eddie: Take a look at the form-plugin-integration example. The way the showErrors() method is called to display other messages would be the same as hijacking the validation itself. You can call form() and element() directly to trigger validation of the entire form or a single element (which you have to pass to element()).

This should get you on the right track:

var validator = $("#myform").validate();
$("#myButton").click(function() {
  validator.form();
});

Please let me know if that works or not. In one case it may be possible to find a more elegant solution, in the other we should be able to find a different approach that actually solves your problem.

As always, a test page can work wonders.

First off, love the plugin and the doc. I am having a simliar issue with hidden values. I have one form, however parts of the form are hidden until something occurs, like a radio or select box. I am having a problem figuring out a way to validate only if visable. I have parent divs which will hide or show sections based a select dropdown.

I would try a dependecy required if I could figure out how to make it dependent on a specific select value.

I have also tried adding the {required:true} class to the elements when they are shown, however adding the class after the validator is initialized doesnt seem to work.

Any input would be appreciated and thanks for the great work!

@Jason: If you can decide when to validate based on the visibilty of some parent element, you can use that like this:

{required: "div#parent:visible"}

I’d need to see the actual markup to tell you which expression would be the best choice. Maybe using the XPath-parent expression like “../div:visible” would work.

Otherwise you can still use a function to determine the dependency, that is much more flexible, but shouldn’t be used in combination with metadata. Use the plugin option instead in that case.

@Jorn, should have thought of {required: “div#parent:visible”}. It worked great since I have 5 main hidden sections which are taken care of by other functions, so this dependency works very well. Quick and easy, thanks for the fast response. You guys should spin up a forum.

Plugin could generate one label when the field is validated. It has this option and I do not know?

I want to show an image (checked) when the field is validated.

Any idea?

@Jason: Great to hear you got it all working.

@Leonardo: It is possible to define HTML as error messages. Check the docs for the “messages”-option and take a look at the second form on the first demo page.
I’ll try to add an example that shows how to do that, but it may take a while.
Let me know about your progress. As always, test or demo pages help a lot.

Hi,

I don’t know if me previous message was clear enough. So, let me try to explain again.

What I want to do is the following: when the user type something in a input and it passes the validation, so I want to show a check image in the side of the input. If the input text does not passes the validation, so show the error message (I’m already doing that).

Something like that: http://www.rememberthemilk.com/signup/

Is this possible?

@Leonardo: No, not yet.

Awesome Work! I couldn’t find your email address, so… I thought I would just post this here.

Again, awesome work! I have a use case, where… I allow the user to pop up multiple Form windows. And there was one minor bug, where the default error label was being applied to the first window. Validation was working properly. Anyway, I modified lines 588 and 589 to reference only children of the current form.

this.settings.errorPlacement
? this.settings.errorPlacement(error, jQuery(“#” +this.currentForm.id +” #” + id) )
: error.insertAfter(“#” +this.currentForm.id +” #” + id);

I hope that is right. Great Job. And I’m using your TreeView control as well. Awesome Work. Thank You!

Jimmy G

Thanks Jimmy. I had a different change in mind that would fix that problem, too. I’m gonna change the internals to carry around the element reference so I don’t need that ID at all.

Hi Jorn

Excellent script and thanks, i dont know what i have done wrong but in IE7 it is coming up with the following error

line:159,155,
Char:1
Error: Object expected
code:0

but in FF everything is working fine with no errors?

Link to page
http://studay.co.uk/test/342/orderform/sampleform.htm

Cheers

@Stu: Can’t see anything wrong with that code. Try to take parts out and see if you can find the source of the problem.

Hi Jorn, I’m looking for a client-side replacement for the ASP.NET validation library. We already use jQuery everywhere, so a plugin like yours would be ideal.

Is there a way that you can specify an arbitrary element to be shown and hidden as the error label for an input field with a validation rule?

We just want to toggle the visibility of elements that contain the error message for a given input field. Each element would have an ID.

I couldn’t find a way of doing this just from reading the documentation.

thanks

@Sam: From what you write I’d say you need to use the showErrors option to customize the message display.

Hi Jörn,

I’m using your plugin for the first time today, and I’m getting an error in Firebug when using one of your examples:

missing } after property list
[Break on this error] rules: {\n

It doesn’t seem to be missing from the example, but it breaks the page.

Here is the example:

$(“#myform”).validate({
event: “keyup”
rules: {
firstname: { required: true },
age: {
required: “#firstname:blank”,
number: true,
minValue: 3
},
password: {
required: function() {
return $(“#age”).val()

@Adam: There is a missing comma after the event property.

Ji Jorn,

First of all, I would like to congratulate you for this great plugin! I have one concern as it was stated by you saying that “Error containers with errorwrappers are not perfect yet in IE6.”. I wonder what was that limitation to your plugin ? Can you please elaborate more ? Thanks in advance.

cheers!

Hi, great plugin, thank you for the work. Had a quick question though. If I have a main page which then loads a form through an ajax call, how can I rebind the event listener? Basically if the form is loaded through an ajax call, the $(‘#myform’).validate(); call does not appear to work. I have tried to use both ‘bind’ and ‘load’ to re-hook the listeners that appear to be broken and have tried to call the validate function from the form tag onSubmit call but nothing seems to work. Sorry for the beginners question, bit new to the javascript and jquery world although I’m enjoying it. Thanks again for the great plugin

regards,

Andreas

@Roland: Open the container demo in IE6 and click Submit in the second form. There is too much space between the error list items, most likely a CSS layout issue, but I couldn’t solve it yet.

@Andreas: It should suffice to call the validate plugin after the form was inserted into the page. Something like this:

$("#target").load("myform.php", function() {
  $("#target form").validate();
});

[...] Eins davon ist das Plugin Validation, mit dem Forms clientseitig sehr einfach validiert werden können. [...]

Great code, the only thing i noticed is if theres a comma separated validation. ex. required: 3 keywords required, use commas to separate.

Is it possible?

@Jimmy: I don’t get your question. Can you explain it some more or give a more detailed example?

Hi,

I get the following error when trying to run the plugin with Mozilla v1.7. Any ideas what the problem may be? I’m worried some of my users may be using this version of Mozilla. Thanks!!

Andreas

Error: unterminated character class
Source File: http://localhost/gssl/js/validate/jquery.validate.js
Line: 1009, Column: 64
Source Code:
return !jQuery.validator.methods.required(value, element) || /^\d{4}[/-]\d{1,2}[/-]\d{1,2}$/.test(value);

@Andreas: Can you please check if the problem persists with the latest revision?

[...] El plugin de bassistance.de fue la solución mas fácil de utilizar. [...]

[...] jQuery Form Validation [...]

The validation doesnt execute? Basically i want the validation to execute if ‘Type Event Title … && ”’ is presence show validation, otherwise dont validate… but its not working. Help please

ex. SCRIPT

tbtitle: {
required: function() {
return $(“tbtitle”).val() == ‘Type Event Title …’;
}

ex.HTML

@Jimmy: You should start by checking all selectors, eg. $(“tbtitle”) seems to be wrong.

Jorn,

First of all, great job on the plugin. I am using your latest pluggin (beta 2). I have a situation where I want to trigger validation based on someone changing a select menu or submitting the form. The validation is working great when I submit it. However, when I chabnge teh select menu, the validation method seems to get invoked, but always retruns true, even though I have not entered data for some required fields. No errors are getting reported in my error container and my call to $(“#avicapture_form”).validate().form() always returns to true. What am I doing wrong? Any help would be appreciated

Here is the code for the change for my select menu:

$('#SCHEDULE').change(function() {
	$("#avicapture_form").validate().form();
	$("#SCHEDULE").val() == 0 ? $("#schedule_0").show() : $("#schedule_0").hide();
	$("#SCHEDULE").val() == 1 ? $("#schedule_1").show() : $("#schedule_1").hide();
});

here is the validation code. Note the event I am using to triggerr the validation normally is on Submit:

$(function() {
	// validate form on change and submit
	$("#avicapture_form").validate({
		event: "submit", 		
		rules: {
			//Schedule 1
			START_DATE0: {		
				// required: function() { return $("#SCHEDULE_STATUS01").is(":checked");},					
				//required: function() { return $("input[@name='SCHEDULE_STATUS0']:checked").val() == 1 ? true: false;},					
				required: function() { return $("#SCHEDULE_STATUS01").is(":checked") ? true: false;},										
				date: true 
		}
	});
});

Hi Jörn,

I think my case need to be described in scenario.

1) I have a template, say <input type=”text” name=”foo” class=”{required:true}” />

2) I need to append this string into my table and eventually it is successfully appended.

Now, the thing is your validator seems to be unable to pick up this dynamically added . Is that one of your limitation ?

I have tried using the following code

var validator = $("#form").validate();
$("#btnSave").click(function() {
  validator.form();
});

but no luck…

it works fine if that input is not generated during run time. Any idea why or how should I write it ? thanks for the great plugin again.

@John: Could you please post a link to a complete example? I’m sure it can be solved, but its very difficult with those two fragments.

Until then, here is a bit code that you should try out:

$(function() { 
    // validate form on change and submit 
    var validator = $("#avicapture_form").validate({ 
        rules: { 
            //Schedule 1 
            START_DATE0: { 
                // required: function() { return $("#SCHEDULE_STATUS01").is(":checked");}, 
                //required: function() { return $("input[@name='SCHEDULE_STATUS0']:checked").val() == 1 ? true: false;}, 
                required: function() { return $("#SCHEDULE_STATUS01").is(":checked") ? true: false;}, 
                date: true 
        } 
    }); 
  $('#SCHEDULE').change(function() { 
      validator.form(); 
      $("#SCHEDULE").val() == 0 ? $("#schedule_0").show() : $("#schedule_0").hide(); 
      $("#SCHEDULE").val() == 1 ? $("#schedule_1").show() : $("#schedule_1").hide(); 
});
});

The submit event is always applied to the selected form, while the event specified via the option is applied to each element. And you should work with a single validator instance, though I’m planning a change that allows you to do that without saving the reference.

@Roland: Generated inputs are something that I haven’t considered yet. Thanks for bringing it up. I need to give that a shot first, but it should be easy to add a hook that allows you to refresh the elements to validate. Currently those are selected only once, just reapplying the validate method won’t help.

This worked out great. I really appreciate it.

There was one side effect of the validation. I also have a submitHandler (that I omitted in my first eaxmple, but included in this one) in my “var validator = $(“#avicapture_form”).validate({…”. One of the side effect of forcing the validation by invoking the “validator.form();” is that the form is also getting submitted. Is there a way to supress that when I am just validating as opposed to a legitimate Submit (Clicking on a Save button with type “submit”) ? Esssentially, I don’t want to submit the form when the user change the “select” menu, just validate. Again, thanks a lot for all your help. Here is the example:

$(function() {
// validate form on change and submit
var validator = $(“#avicapture_form”).validate({
rules: {
//Schedule 1
START_DATE0: {
// required: function() { return $(“#SCHEDULE_STATUS01″).is(“:checked”);},
//required: function() { return $(“input[@name='SCHEDULE_STATUS0']:checked”).val() == 1 ? true: false;},
required: function() { return $(“#SCHEDULE_STATUS01″).is(“:checked”) ? true: false;},
date: true
},

submitHandler: function(){
// submit the form
submitAviForm();
}
});

$(‘#SCHEDULE’).change(function() {
validator.form();
$(“#SCHEDULE”).val() == 0 ? $(“#schedule_0″).show() : $(“#schedule_0″).hide();
$(“#SCHEDULE”).val() == 1 ? $(“#schedule_1″).show() : $(“#schedule_1″).hide();
});
});

Sorry for the barrage of questions, but I also noticed after I sent my message that the validator.form() isALWYS returning form even though the form has no errors and is actually submitting. Since what I want to do is stop the select from hiding the current screen and showing another, this is causing an undesirable effect.

$(’#SCHEDULE’).change(function() {

// This is ALWAYS being returned as FALSE regardless whether
// the page has errors or not.
if (validator.form())
{
$(”#SCHEDULE”).val() == 0 ? $(”#schedule_0″).show() : $(”#schedule_0″).hide();
$(”#SCHEDULE”).val() == 1 ? $(”#schedule_1″).show() : $(”#schedule_1″).hide();
}
});
});

Hi Jörn,

Thanks for your reply. Could you send me an email for notification once you got that hook done ? or you have to wait until for your next release to have that feature of refreshing the element for validation ?

Desperately need that feature I would say this is the last stage for me to get through the testing in order to confirm whether to use your plugin or not.

cheers man!

@John and Roland: I’ve fixed it. Please give beta 3 a try and let me know if it works for you.

@Roland: Check the custom methods example and validator.refresh(). Documentation isn’t perfect up-to-date yet, but I’ll work on that for 1.0 final.

[...] As usual, all interesting stuff like downloads, examples and documentation are on the plugin page. I’ve also updated the Plugins API browser if you prefer that form of documentation. [...]

Hi Jörn,

I had downloaded your beta 3 and apply the changes. It works! Thanks a million and once again, great plugin!

At last I can finalized to use your plugin in our project. It is indeed a good support from you as well. Maybe you would want to have a donate column in your page.

I downloaded your Beta 3 and tried it. It now works great. The implicit call to validate the form no longer results in the form being submitted and the validate returns true or false, depending on whether I have errors on the page or not. Thanks a lot for all your help.

Great plugin and support. I really appreciate it.

Hello again. I noticed another strange behavior when using the range value (rangeValue) validator. If I specify a value between 0 and 999 (rangeValue: [0, 999]) and I enter an invalid value (i.e 2000), I receive the following error:
Please enter a value between and 999
Note the “0″ is MISSING after the “between”.

However, if I specify a range between 1 and 999 ((rangeValue: [1, 999]) ) and enter an invalid value (i.e 2000), I receive the following error:
Please enter a value between 1 and 999
Note that the “1″ DOES appear after the between.

Am I doing anything wrong here?
Here is my validator function. As usual thanks for all your help.
$(function() {
// validate form on change and submit
var validator = $(“#tracking_form”).validate({
event: “submit”,
rules: {
// Background
UPDATE_FREQ: {
required: true,
rangeValue: [0, 999] // This cause the 0 not to show up in the message
}
});
});

@John: No, that is a bug. I tend to use the default operator quite often, and that causes issues when a value of zero is valid. Thanks for reporting, I’m glad someone uses the plugins and helps improving it.

I’ve fixed the issue, and commited it to jQuery’s subversion repository. Normally you can get it directly from there, but currently the svn browser isn’t available. Therefore I’ve updated the release package, please just download it again and give it a try.

Thanks a lot. That fixed the problem. Everything is working well now. Again, great and very useful plug-in and support

I would like to show only “*” for all validate rules, are there any way to set “*” as default message for all validations?

Resubmit?

I have a form with a submit button.

I have next code:
jQuery(‘#seccionesForm’).submit(function()
{
var options = {
//target: ”,
beforeSubmit: preSubmitSeccion, // pre-submit callback
success: postSubmitSeccion // post-submit callback
// timeout: 3000
};
test = jQuery(“#seccionesForm”).validate(
{
submitHandler: function(form)
{
jQuery(“#seccionesForm”).ajaxSubmit(options);
return false;
}
});

Submit button call a asp page to save all fields.

Then:
First click on submit button : work nice.
Second click on submit button: send the form twice
3 click: send form 3 times…

Any idea why is send more than one time?

Thanks!!! This is a great pluggin!

Hi,

I’m still getting the following errors on a fresh install of Mozilla v1.7:

Error: invalid quantifier {
Source File: http://localhost/gssl/js/validate/metadata.js
Line: 95, Column: 13
Source Code:
if ( !/^{/.test( data ) )

Error: unterminated character class
Source File: http://localhost/gssl/js/validate/jquery.validate.js
Line: 1031, Column: 64
Source Code:
return !jQuery.validator.methods.required(value, element) || /^\d{4}[/-]\d{1,2}[/-]\d{1,2}$/.test(value);

Any ideas?

Thank you kindly,

Andreas Sandberg

Hi Jorn,

Regarding the post above, I was able to remove the functions that caused the problems, one validated the ISO date which I didn’t need, and the other did a regular expression test for test data in metadata. Everything works fine now, but I wonder what Mozilla didn’t like. Thanks.

Andreas

Hello,

What do you do if you have some javascript you must run that requires an input parameter after clicking a submit button. For example, I have two buttons to submit on the page, one labeled “Save” and one labeled “Next”. Depending on which button is clicked I use javascript to set a hidden variable with the value “Save” or “Next” that is given as a parameter to the javascript function. Unfortunately, if I use the onclick event to call this function when the submit button is pressed, validation no longer occurs. How do I get around this problem?

@John: Cool

@Oscar: You could try to overwrite all default messages with this:

jQuery.each(jQuery.validator.messages, function(i) {
  jQuery.validator.messages[i] = "*";
});

Regarding your second question: Why do you assign the validation on each submit? The call to the validate plugin itself adds a submit event handler.

@Andreas: Oh well, looks like I’ve got to install Mozilla 1.7. I’ll let you know if I find something.

@Dean: You could try to handle that via a different submit handler. Something like this:

$("#myform").submit(function(event) {
  handleSubmit(event.target);
}).validate();

That should run your own submit event handler before the validation handler. Using event.target should give you the information you need.

Thanks for the reply. However, I am still not sure how that would give me access to the information about what button was pressed.

event.target gives me the name of my form and the other attributes of the event object don’t give me the name or the value of the button on the screen that was pressed.

Hi,

I found that in Bate3 there is a place using $() explicitly, assuming that there should be no conflict naming.

489 reset: function( element ) {
490 this.errorList = {};
491 this.toShow = $( [] );
492 this.toHide = $( [] );
493 },

I had not tested this but I think it would cause some problems when jQuery() is used instead of $().

Hi!

I have a quick question.

Instead of a submit button (

@Li: You are right. I’ll remove that as soon as possible. Thanks for spotting.

@L. Cosio: Seems like your message got screwed by the html filter. Can you please try to post it again or send it to me via email? Thanks.

Thanks Jörn for your reply .

Msg Issue: Great!

Resubmit:
I am not sure to undestand your solution.
If I only have:

var options = {
//target: ‘’,
beforeSubmit: preSubmitSeccion, // pre-submit callback
success: postSubmitSeccion // post-submit callback
// timeout: 3000
};
test = jQuery(”#seccionesForm”).validate(
{
submitHandler: function(form)
{
jQuery(”#seccionesForm”).ajaxSubmit(options);
return false;
}
});

The validation is not executed, after press submit button is executed the action of the form.

Sorry if my explanation is not very good.

@Oscar: I can’t see anything wrong with the code you posted. It would be much easier to help you if you could provide a demo page. If your code is part of a larger application, extract the interesting part to a single html file.

Hi Jorn,
Awesome plug-in thanks!
One problem: My forms are hidden when the page loads – the onLoad handler doesn’t seem to attach the validator to the form. Works fin for visible forms. Is there a way to correct this or do I have to attch the validator only once the forms have been shown?

Hello,

How can I change the validation rules on my form ?
I have to set the request:true for a field only if the user clicks on a radio button (without reloading the page). I’ve tried with the validator.refresh() but the validator remains the same.

Thanks in advantage

Ste

@Julian: “Hidden” like display: none is set somewhere in the stylesheet? That shouldn’t cause any problems, but I haven’t tried that myself. I’ll let you know if I find something.

@Ste: You meant “required: true”, right? In that case you can use the depedency checking. Replace “true” with a string or a function like this:

someElement: {
  required: "#someRadioButton:checked",
},
someOtherElement: {
  required: function() {
    return $("#otherRadio1").is(":checked") && $("#otherRadio2").is(":checked");
  }
}

I recommend to use the first approach, providing a jQuery-expression. If the expression returns at least one element, the field is required.

The plugin also provides “:blank” and “:filled” to use within those expression, allowing you to make a field required when another field is empty or has some content.

Thanks for your patient seem that finally works… however I have another issue….

My page have two forms.
I validate the first but I cannot validte the second.

First one have rules:

jquery(“DB”).validate(
{
rules: validations,
submitHandler: function(form)
{
jquery(“#DB”).ajaxsubmit(options)
}
}

In options I have a postSubmit Action that execute the validation of the second form:

function postSubmit()
{
.
.
jquery(“sectionForm”).validate(
{
submitHandler: function(form)
{
jquery(“#sectionForm”).ajaxsubmit()
}
}

}

I don’t know why the second validation is not executed. In the second form the validations are done using meta: class={required:true}

Any suggestion?

Thanks

[...] Marketo.com (The comapny I work for as UX Architect) is launching their flagship product and public site this week.  Uses a bunch of jQuery, Tabs Plugin, Validation Plugin and Scrolling Promo Effect.  Design was done by Sean Zimmerman.  HTML Production was done by NetKitchen and myself.  Overall, I think it’s a solid looking site. [...]

@Oscar: The call to validate() doesn’t execute the validation immediately. For that, you need to call the form() method of the validator object, in your case it should be ok to do it like this:

 if ( $("#sectionForm").validate().form() ) {
  jQuery("#sectionForm").ajaxSubmit();
}

Hi Jorn!!!

You are the best!

Now works fine…. let me another question…:-P

Are there any way to use another “tag” instead of “class”?

ex:

I need use:

@Oscar: That example didn’t quite come through, but it sounds like you want to use a simple feature of the metadata plugin.
You can find an example in the custom methods demo, the interesting line is this:

$.meta.setType("attr", "test");

Allowing you to specify validation rules via metadata with test=”required:true”.

Hi Jörn,

Great plugin! Got it working without too much trouble and it works perfectly. One quick question. Has anyone asked about phone number validation? I couldn’t find anything documented anywhere on validating numbers will characters that would normally be found in a phone number like (,),or -. Any suggestions or pointers?

Thanks
Al

@Al: So far there isn’t support for phone numbers yet. In any case you can add additional methods using jQuery.validator.addMethod(), details are documented in the API.

For phone numbers I see a few possible approaches: One that only validates allowed characters. One that validates the exact format. Or one the simply disallows entering invalid characters, maybe even in a given format. The latter can be achieved without any trouble with the masked input plugin, which I can highly recommendate.

[...] As always, all interesting stuff is on the plugin page, with more API documentation in the Plugins API browser. [...]

Hello! Your validation plugin is an excellent extension to jQuery’s already-formidable library. I’m quite pleased with it so far.

However, I’ve noticed that Release Candidate 1 no longer validates textareas for me–neither in IE nor Firefox. Not even the example you provide with the download validates the required textarea.

Also, when I tried using the packed version with IE 6, I got an error “Expected ‘:’”. Using the unpacked version gives no error.

Hi Jörn,

Validation can validate elements when a form is submitted. But in some browsers, like Firefox, using a password manager, a dialog will be shown for changing or remembering password when password input element is contained in the form being submitted. It’s annoying when there are errors in user’s input because Validation will stop submitting to show invalid input after the dialog of the password manager. Can you allow Validation to watch specific event, such as the click on submit button, which is triggered before submitting, to validate the form. If that, invalid input will be pointed out and the submit will be stopped and no dialog from password manager. The dialog only appears when there is no error in user’s input.

Hi Jorn,

I want to be able to customize the error messages upon form submit. For example, for a particular field my error message should be –

“Please fill in an appropriate” + phoneNum + “number”.

the phoneNum variable could be either “mobile”, “office phone”, “residence” based on a drop down value.

So, the question is can I redefine some messages on form submit based on some form field value selected/filled by the user?

Please let me know.

I have one html who call one iframe with ajax content via thinkbox

The link in ths html is that:

My problem is when i click in this link all the iframe is loaded but when it finish i get this error in ff

$.validator has no properties

So i click out of the thinkbox and it close, withount reload the page i press again in the link, and now the content appear
If i test the script alone it work perfect, but not calling the thickbox

Any1 have an idea why i getting this error?

Thanks in advance

The enviarmail.php script show the next html (only a part, the rest maybe could be the example and still dosnt work)

$(document).ready(function() {

$.validator.setDefaults({
debug: true
});

$().ready(function() {
var v = $(“#enviarmail_form”).validate({
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
dataType: “json”,
after: function(result) {
if(result.status) {
v.showErrors(result.data);
v.focusInvalid();
}
}
});
}
});
});
jQuery(“#reset”).click(function() {
v.resetForm();
});
});

Correo/s electrónico/s

***********
***********

Jörn,

Thanks for the suggestion. I went ahead and wrote a method for phone numbers and thought I would reply with it in case someone else has need of something like this. It’s a simple validation that checks to see that the correct number of numbers were entered. I’m sure someone can think of another way of doing this but for just US phone numbers this seems to work fine.

jQuery.validator.addMethod("phone", function(pnumber) { 
	var stripped = pnumber.replace(/[\(\)\.\-\ ]/g, '');
	if (isNaN(parseInt(stripped)) || !(stripped.length == 10)) {
		return false;
	}else{
		return true;
	}
}, "Please specify a valid phone number");

@Ben: Thanks for reporting, I’ll fix that.

@Li: I haven’t noticed that behaviour yet, thanks for reporting. As it is a bit difficult to replicate: You say its enough to stop the click-event to prevent the password manager to popup on invalid forms?

@Mandy: You could add a change-event to your select and overwrite the message you configured. Something like this:

var messages = {
  phone: "Please select a phonenumber."
}
$("#myform").validate({
  messages: messages;
});
$("#phoneType").change(function() {
  messages.phone = "Please fill in an appropriate " + this.value + " number”;
});

While the options object that you pass to the validate-plugin is copied, its elements can still be referenced and changed.
Please let me know if that works for you, maybe there is an easier approach.

@sebastien: I can’t see any obvious issue in your approach. Could you post a testpage?

@Al: Thanks for posting, could be indeed quite helpful for others. I’ll try to gather someone additional validations that you can pick from. Of course it would help a lot if you could provide a bit documentation and one or two examples what the method does, that is, what is a valid phonenumber.

ok, lets try w/o thickox, i get the same error

in this url u can check this, and if u could helpme thx a lot

http://www.belarsoluciones.com.ar/test/

[...] It uses the Masked Input Plugin.  I like this plugin alot and used to do something similar with my inlineError form.  However, I think I will switch to this new method.  It’s much stronger.  I tried to use the Validation plugin, but I just couldn’t get it to behave how I wanted.  The plugin author assures me that it is possible and might collaborate with me to come up with some more varied demos.   I am excited to contribute. [...]

Hi Jörn,

Can I call a javascript function JUST right before the form is submitted ? Meaning that right after all of the validation has passed through the rules and no errors and therefore the form is ready to submit. So, just right at that moment I would want to call a javascript function. Is that possible ?

cheers!

Hi Jörn,

One more question. Is it possible for me to trigger your method $(“#form”)validate() at the later stage(just right before submit) instead of during $(document).ready(); ? This is because some of the field(input) will only be assigned with the rules(class=”required:true”) at the later stage instead of the first load of the page.

cheers !

Hi Jörn,

Yeah, I have already tried using refresh() method but it seems to still submit the form without validating the field.

Initially, the field looks like the following :-

after some logic from my end, i’ve assigned the attribute validation to the class and it becomes…

Then I tried to do a refresh() and submit the form, somehow it won’t validate that field but instead submit the form directly. What happen ?

@sebastien: You are trying to access the validator object before it is loaded. Moving the call the $.validator.setDefaults into the document.ready block could help. Otherwise you have to wait for the script being fully loaded by using the $.getScript-callback.

@Roland: Your examples didn’t quite come through. Can you post an example page or email them to me?

Hi Jörn, thx for your reply, now i fix the problem loading direct the script, but i made some change look what happend when i call via thickbox.

http://www.belarsoluciones.com.ar/test/

Howdy, Jörn. Thank you for this plugin; it’s already saved me a great deal of time!

I’m not sure if this is a bug or a feature—it seems the former—but when I have a rule like:

quantity: { required: false, digits: true }

…then apparently no check is done to make sure that the value of “quantity” actually matches “digits”. (In other words, the field is allowed to be blank or any value.) However, when specified as:

quantity: { digits: true }

…I observe the correct behavior: the field is allowed to be blank or just digits.

Any thoughts? I can email you an example if this doesn’t sound like what you expect to happen so that you can see it in context. If it is what you expect, perhaps a clarifying note could be added in the documentation.

Hi Jörn,

I love the validator, but, I’m having an issue with the error boxes. When a field is valid they are marked as hidden rather than removed, and when they come back, the have style=”block” in the label. This is OK if your label is always a block, but alas mine should be inline…

Any hints? Ideas?

@sebastian: I couldn’t find any obvious errors in your code. I’ll let you know if I find something.

@Steven: Thanks for reporting. This is a bug: The parameter to required is ignored, it doesn’t matter if you specify true or false. I’ll try to fix it or at least better document it.

@Dave: It should suffice to set display: inline explicitly in your stylesheet for the error labels. I had to do that in the errror-container demo to get the display right in IE6. Let me know if that works for you.

Hello.

Love the plug-in – thanks!

Can you help me with a behavior issue. I find that when I tab to a field controlled by the validator, the error message is fired before the user has a chance to enter a value. Is this correct? Have I set it up badly?

Thanks!

@Chis: I’m working on that behaviour, improving it to be less obtrusive. This is the current plan:

– improve general validation behaviour, set these defaults and make them configurable:
– validate invalid elements on keypress, removing the error as soon as possible
– don’t validate valid elements on keypress/focus, giving the user the chance to enter the correct value before complaining
– validate elements on blur but make required optional. if required would pass, check other rules
– validate everything on submit

Hey Jorn,

For some reason, the validation plugin will only validate form elements when the ID and name attributes on the element are identical. This appears to be the problem with the textarea problem I mentioned before–my textarea had a different name from its ID, whereas all the other elements had identical names and IDs.

Okay, now I feel like an idiot. ^_^

I just read your “recent changes” and saw that it works on name now. :r My apologies–it’s late. Please feel free to delete these comments.

I should probably stop coding for tonight…

Then Ben we should use id or name into validations rules?

Hi Jörn,
I just downloaded your updated RC1 version of the validator. I’m having a problem with the errorClass though. When there is an error on my form, the errorClass gets applied to the entire form. So, for my error messages, I have set the text to be red when invalid, now the entire form has red text.

Any ideas? It was working fine in the Beta 3 version.

Nice plug-in. Thanks.

Thanks for the plugin! Although I’m not a JavaScript expert, and it took a bit of time to grasp how it works, it seems about as easy as possible, given it’s vast extendability.

Here are just some additional rules that work like minLength and minValue, etc. rules:

jQuery.validator.addMethod('maxWords', function(value, element, params) {
    return !$(element).val() || $(element).val().match(/\b\w+\b/g).length < params;
}, 'Please enter {0} words or less.');

jQuery.validator.addMethod('minWords', function(value, element, params) {
    return !$(element).val() || $(element).val().match(/\b\w+\b/g).length >= params;
}, 'Please enter at least {0} words.');

jQuery.validator.addMethod('rangeWords', function(value, element, params) {
    return !$(element).val() || ($(element).val().match(/\b\w+\b/g).length >= params[0] && $(element).val().match(/\b\w+\b/g).length < params[1]);
}, 'Please enter between {0} and {1} words.');

Follow up to my previous post; it looks like the check function was modified in the RC1 version to also set the class of the element’s parent to the errorClass.

Is there anyway to just set the errorClass for the element and the error message?

Thanks.

@Ben and Oscar: The rule of thumb is this: Name attributes are required, without them validation doesn’t work. IDs are optional, if provided, they are used in the for-attribute of the error label.

@Jose: Thanks for reporting. When adding that I assumed that each input field is wrapped by another element and not a direct child of the form element. I wonder if it would work to simply filter out form elements:

jQuery(element).add( jQuery(element).parent().not("form") ).addClass( this.settings.errorClass );

looking at your examples now, I see what you mean. I think I’ll need to wrap my inputs in their own elements. I have another case where I have a div containing text and an input field. In that case also, the text preceding the input field is changed when there is an error in the input field since the containing div has its class set to the errorClass.

Thanks.

@Jose: I see. In that case it seems like the better approach to simply adjust those CSS selectors to style only the error labels and input elements.

[...] Validation by Jörn Zaefferer – This is a tricky one.  It doesn’t exactly work the way I want, but Jorn has been extremely nice and asking about form suggestions.  I am hoping the next version will address some of the issues I had with it. [...]

Hi Jörn,

Great software. I have been playing with several of your plugins for a day now am very impressed with the quality. I have a functionality question. I am using your Tooltips with the Validation. For example, in my form I have elements each of which has a label and a text element. Immediately after the text element I have a link which I am using as a Tooltip anchor. As follows:

?

My issue is that the Validation system inserts its error label between the text field and the Tooltip anchor. This is, of course, the expected result. Is there a way that I can get the error label added after the Tooltip anchor?

Thank you for your time and generosity,
Mike

Hi Again,

Sorry about the previous post. Guess I do not know how to transmit the HTML in this comment submission system. I simply included some HTML fragments in line. I also had a typo in my email address. The above is now correct.

Mike

On the Demo Test page:
http://jquery.bassistance.de/validate/demo-test/
on the “Validating a complete form” form, clicking in the Firstname (or Lastname, Username or Password) field, entering nothing and then tabbing to the next field causes an error to be displayed next to and for the second field. More tabbing results in the correct behavior though. Problem appears in FF, Safari, and Opera.

Any suggestions?

Hi Jörn,
Looking at your radio button & checkbox example, if there is an error with the checkboxes, the first checkbox in the group is being hidden. It looks like it has the same class set as the error label, but since the error class has a ‘display: none;’, the first checkbox containing the validation rules is being hidden.

any suggestions on getting around that problem?

Thanks again.

This is an excellent validation plugin, thanks!
I’m having trouble with one set of behavior. Is there any way to require a text field if a checkbox is not checked? The opposite of the scenario in the examples section where you have:
required: "#newsletter:checked"
How might you go about something like this:
required: "#newsletter:unchecked"?

Hi Jörn,

Thanks for the great plugin. I have a problem though i was hoping you could help me out with. My script works perfectly in IE 7 but not in firefox 2, talk about weird. I know its something to do with the submitHandler function, am i using it correctly? Please help….sample code is below:
—————————–

		
$(document).ready(function() {
	$.validator.setDefaults({
		debug: false
	});
	
		
	$("#signupForm").validate({
			event: "keyup",
			rules: {
				firstname: "required",
				lastname: "required",
				fromCountry: {
					required: true,
					minLength: 1},
				toCountry: {
					required: true,
					minLength: 1}
				email: {
					required: true,
					email: true
				}
			},
			messages: {
				firstname: "Please enter your firstname",
				lastname: "Please enter your lastname",
				fromCountry: "Please enter the pickup country",
				toCountry: "Please enter the destination country",
				email: "Please enter a valid email address"
			},
			submitHandler: function(form) {
  			 	$(form).ajaxSubmit({url:"mailsend.php",type:"post"});
		  }
    
	    });
		
		
	});

————————————-
cheers,
Hagen

@Mike: You can customize the error placement using the errorPlacement option. In your case something like this should work, assuming that each field has such an anchor:

$("#myform").validate({
  errorPlacement: function(label, element) {
    label.insertAfter( element.next() );
  }
});

The default error placement uses label.insertAfter( element );.

@Erin: I’m working on that behaviour. I’ve already got the keyup and blur behaviour improved alot and they are active by default. Stay tuned!

@Jose: Thanks for reporting. That is a bit ugly, I’ll fix that as soon as possible.

@Elliot: There isn’t an expression yet for “unchecked”. The plugin already provides “:blank” and “:filled”, so adding “:unchecked” seems like a good idea to me.

@Hagen: I can’t see anything wrong in your script. Could you provide an example page?

I’m having some trouble with a dynamic table in a form that I validate. I can add rows to the table (the text inputs are required), and do a validate.refresh(). This works fine.

Now, if I remove the dynamically added rows and they would have failed validation, the form will not submit. If, however, I remove the dynamically added rows and they would have passed validation, the form submits just fine.

I’ve tried adding a validate.refresh() on my remove (like I have on the add), and it doesn’t seem to matter.

Thanks in advance for your help.

Hi Jörn,
I have an input field where I would like to allow comma separated numbers and decimal values but only if they’re positive.

Using something like:
myField: {number:true, minValue: 0}
I get a validation error in minValue if I enter a number like 3,500

Is there any combination of the existing methods that would support this number?

Thanks.

The error messages say “then”, when they should say “than”.

@John: Sounds like a case I haven’t taken into account yet. I need to investigate where the problem occurs. An example page would help alot.

@Jose: Someone asked for this before, I’ll try to add something.

@Brandon: Thanks, I’ll fix that.

Jörn,
Once again, thanks for the great pluggn.
I’ve written a few extra methods I thought people might appreciate. This brings your jQuery validation up to where our prototype validation was previously:

jQuery.validator.addMethod("letterswithbasicpunc", function(value, element) {
	return !jQuery.validator.methods.required(value, element) || /^[a-z\-\.,\(\)\'\"\s]+$/i.test(value);
	
}
, "Letters or punctuation only please");  

jQuery.validator.addMethod("alphanumeric", function(value, element) {
	return !jQuery.validator.methods.required(value, element) || /^\w+$/i.test(value);
}
, "Letters, numbers, spaces or underscores only please");  

jQuery.validator.addMethod("lettersonly", function(value, element) {
	return !jQuery.validator.methods.required(value, element) || /^[a-z]+$/i.test(value);
}
, "Letters only please"); 

jQuery.validator.addMethod("nowhitespace", function(value, element) {
	return !jQuery.validator.methods.required(value, element) || /^\S+$/i.test(value);
}
, "No white space please"); 

jQuery.validator.addMethod("anything", function(value, element) {
	return !jQuery.validator.methods.required(value, element) || /^.+$/i.test(value);
}
, "May contain any characters."); 

jQuery.validator.addMethod("integer", function(value, element) {
	return !jQuery.validator.methods.required(value, element) || /^\d+$/i.test(value);
}
, "Numbers only please");

jQuery.validator.addMethod("phone", function(value, element) {
	return !jQuery.validator.methods.required(value, element) || /^\d{3}-\d{3}-\d{4}$/.test(value);
}
, "Must be XXX-XXX-XXXX");
 

In addition I found an easy way to provide a required if unchecked method:

required: function(element) { return !(jQuery("#other_id").is(":checked")); }'

Is there a way to perform validation on two events? I’d like to validate my form both on “keyup” and “blur”, but “event” only accepts a string — not a map of events. Any way around this?

Cheers.

@Ermath: I’m working on much more interactive validation. You can preview it from svn or wait for the RC2 release. I’m designing it to give the user feedback as early as possible, without ever disturbing him. And you won’t have to configure anything.

Thanks for making such a great tool to aid in client side validation. I ran into an issue today… and I don’t know if it’s something I’m doing wrong or a bug, but in the contact form I created, if the last input in a fieldset fails validation, every label in that fieldset turns red to indicate an error.

To see this, go to http://www.visionalechoes.com/contact.php

The first 3 inputs are in a fieldset, with the phone number not being required… just type a letter in it to make it fail. And the description is in its own fieldset so when it fails, its label changes too. If the last element in the fieldset passes but another fails, this doesn’t happen.

Any suggestions?

vEchoes: There is definitely going something wrong. For a first check, could you trie the latest revision? Odds are good that the problem is fixed there. Please let me know if that helps or the problem persists. In the latter case, it would help a lot if you could extract a test page (just the markup and scripts). Thanks.

Thanks for the quick reply. I extracted the form and scripts and only included the styles necessary to illustrate the problem.

Also, I tried the new revision and it didn’t fix the problem. As a matter of fact, it’s now running the validation process onBlur on some of the text elements… sort of running amok. and the label colors are still changing colors.

Extracted form: http://www.visionalechoes.com/contact2.html

Okay, I’ve removed the feature that adds the error-class to the field’s parent element. There are too many issues with it. Please give the revision from svn another try.

Hi Jörn,

Thanks for this neat validation plugin. I have some problems though i was hoping you could help me out with.

I have this code:

– HTML

– JavaScript

$('#form').validate({
tickets: {
required: true,
number: true
}
});


first problem is related to validation above-mentioned select element on IE (exactly on line #556) – it’s always invalid.

here goes the second: in new version you refactored showErrors method, therefore there’s no way of using it without corresponding element(s) (i wanna be able to use it as generic error handler, but there are number of situations where i cannot pass corresponding error element). could you maybe make some “public” method which can be used to display errors with or without elements attached to them (taking Array of Strings/Objects as an argument for example) ?

Thanks in advance.

Hello Jörn,

I am using thickbox to load a page containing a login form through ajax. I am then using the validate plugin. Everything works fine in FF but IE just submits the form to the target page without triggering any validation. The login form works perfectly in IE outside of the thickbox. If you could point me the right direction that would be much appreciated. I read the comments left by Sebastien and your responses but havent been able to arrive at a solution.

Thanks,
Josh

[...] Its out! A version of the jQuery validation plugin that I call 1.0 final. [...]

Hello Jörn,

This is really a great plugin!!!!

For all those who get problems whis thickbox, try using thickbox with iframes, it work for me with FF and IE.

Hi Jörn,
Great plugin!
I just tested version 1.0 final and I encounter one problem with “keyup” event. With my code and version 1.0 final it’s not working. When I use version 1.0 beta 3 “keyup” event works just fine.
Best regards,
Sławek

PS. You can even delete submitHandler section. “keyup” event still not working with ver1.0 final and works with ver1.0 beta 3.

@Slawek: That is a regression I could have avoided. I already have some much more advanced code ready to handle keyup and blur events in a more appropiate way, but that didn’t make it into 1.0. Unfortuanetely I forgot to put the old event-code back in.

I’ll try to release 1.1 soon. It just needs some more testing.

I just installed the 1.0 final and all my blur events quit working.

On RC 1: event: “blur” works fine.
1.0 final: event: “blue” doesn’t do anything.

Is there another way to do blur now, or is this a regression?

Thanks

Sorry, didn’t see your most recent message before I posted mine.

Hi Joern

Thanks for this wonderful plugin.

I have a question regarding the display of error messages though:

Each of my input elements is surrounded by a label element. The error message should be a strong-Element that is prepended to the label content. This works fine using the errorElement and errorPlacement option. But I would like to highlight the entire label if there was a validation error. I tried to use the errorPlacement function and added an additional class to the label parent of the element.
To get rid of this additional class I use the success function:
success: function(errorStrong) {
errorStrong.parent(‘label’).removeClass(‘error’);
}

But this way the class is not added again if the errorStrong element is reused, e.g when doing multiple checks on one element.
When I now remove the errorStrong element in the function success the adding and removing of the css works fine but there is a bit of flickering when one error message is replaced by another. Do you have any tips on how to improve this?

Thanks

Claudia

@John: No problem, I should have avoided that regression in the first place.

@Claudia: My previous solution to this was adding the error class to the fields parent element. Unfortuanteley that caused way too much trouble, so I simply removed due to lack of a better solution.

Another idea was this: (Optionally) find the label-element for an element (element-id must match for attribute, doesn’t have errorClass) and toggle its errorClass.
The flaw is obvious: How to identify error-label and element-label once the error class is added?

Maybe a simple callback that is called for adding and removing the error class would be the best solution in this case.

http://jquery.bassistance.de/validate/demo-test/custom-methods-demo.html does not work for me in either Firefox2 or IE6. I get “validator.errorList has no properties” line 38 in firebug

Just looking at this plugin for the fist time. A dent to confidence when the example pages do not work

@alek: Yeah, thats a bit ugly. I’ve noticed it meanwhile, it should be fixed in 1.1 which should be released pretty soon. Please let me know if anything else is not working.

Also linked on the demo-page is the testsuite, more then 300 tests (and counting) running against the plugin. It isn’t complete yet, but I’m working on it.

Great plug-in, thanks for your work on this!

I have an issue, and I’m not sure where to turn. I an error in firebug when I load my page. It seems to keep the plug-in from working. Anyone have this issue?

Error:
Window schedule has no name assigned (line 569)

URL:
http://admissionstest.unl.edu/daily_visit/schedule/?type=High%20School%20Senior

If this isn’t the correct place to post this question, please provide an alternate.

Thanks!

@Seth: I don’t get any errors on that page. For an active community check out the jQuery discussion list.

The script “jquery.validate.pack.js” from the 1.0 final version is NOT working with IE 6.

“jquery.validate.min.js” & the unpacked version works OK.

Somebody with the same problem?

And also the page http://jquery.bassistance.de/validate/demo-test/ doesn`t work in IE6 (IE 6.0.2900.2180.xpsp_sp2_rtm). No error thrown, just submits the forms.

Hi Jörn

Thanks for that great plugin.

It is somehow possible to disable validating after setting it or overwrite settings? I got an form in which some elements are shown but can be switched to hidden. Of course when they are hidden they should not be required.
I tried to just overwrite the settings but it didn’t work out.

Thanks,
Michael

@Sebastian: Sorry for including the packed version without testing it. Should be fixed soon.

@Radu: I’ll check that, thanks for reporting.

@Michael: That sounds like you should use the dependency-checking supported by required. Check the examples in the API-browser for jQuery.validator.method.required.

Yeahhh, best plugin ever

Found an solution:

elementwhichishidden: {
required: function() {
return ($(‘#parentelement’).css(‘display’) != ‘none’);
},
minLength: 3
},

[...] Hooray! Version 1.1 of the validation plugin brings, along a few bufixes, sophisticated validation on blur, keyup and click events. They are designed to help the user where appropiate, without interrupting when he hadn’t even the chance to enter anything. [...]

@Michael: There are two even shorter solutions, one being much shorter, the other more flexible:

elementwhichishidden: {
  required: function(element) {
    return ($(element).parent().css(’display’) != ‘none’);
  }
},

elementwhichishidden: {
  required: "#parentelement:visible"
},

Thanks Jörn, implemented it that way.

I got an other question. I got one select-field in my form which should throw an alert when it is incorrect. How can i do this?

Hello, Jörn. This is an extremely minor thing, but you might want to go through and do a search for “no longer then” and replace it with “no longer than”. It’s part of one of the validation error messages and is not quite grammatical. It shows up at least once in the documentation (and here on the website) and then once in the code.

Thanks (again) for the fantastic plugin!

-Steve

@Michael: You can apply validation rules to selects as normal. To display an alert you have to use the showErrors-option.

@Steven: I think I fixed all those buggers now. Its an annoying mistake I keep repeating…

The only thing I can say is: YEAH!. That’s a huge, great pice of coding art you’ve done here!
Greatings from Toruń, Poland!

Hi Jörn. Glad you put the blur and keyup events back in. I tried v1.1 (even the latest from svn), but I’m having trouble with keyup. When I first navigate to a field, keyup does not work. Then if I TAB out of the field and Shift-TAB back to it, keyup works perfectly. Any idea to what causes this?

Keep up the good work!

I found it quite annoying when the keyup validation starts before I had the chance to enter anything. The users and designers I talked to agreed with that. “Fixing” that by tabbing shouldn’t work either. Currently tabbing “fixes” it only when you enter something (incorrect), and then tab forth and back. Keyup validation gets activated when an error message was already displayed.

Does that make any sense? In case you need to provide keyup validation without exceptions: How about an option to enable that? Would that work for you?

Strangely i have tried on another XP machine and things seem to work just fine. Works ok with 6.0.2900.2180.xpsp_sp2_gdr. As soon as i have acces to the machine i have got the first report, i’ll retry.

PS: Thanks for the great job!

Jörn, good point — I see what you mean. In most cases you would indeed want to wait with keyup validation. In my situation, the user has to enter some rather specific and longish entries, and we want to guide the user along the way by displaying various icons while he/she is typing away in each field. So an option to enable it would be great (default off).

Hi Jorn,

I’m wanting to insert a password strong validation in our users form. Microsoft haves a great example:

http://www.microsoft.com/protect/yourself/password/checker.mspx

This example uses an external js for validation. How can I “plug” this routine in a form(already) with your Form Validation plug-in? Cheers

@Radu: Oh well, weird IE again.

@Ermath: Okay, I’ll add that then. Default: default. True – immediate validation. False – no keyup validation. Sounds like a plan, doesn’t it?

@Marco: The checker routine and result display is a whole plugin itself, but it gets really interesting in combination with validation, eg. a at least strong password is required.

Implementing the basic stuff is more work that I can currently spend on any jQuery related development. If you take up the task or find someone (eg. on the jQuery discussion group) to do it, I’d be happy to integrate it into the validation plugin.

Is it possible disable the message for one input in the form? There is no space left for the message, but when i don’t define a message, the standard message is displayed.

Thanks,
Michael

@Michael: The current workaround is to specify whitespace as the message. username: " ". I’ll try to fix that.

Jorn,

I am getting onblur validation even though I am not specifying it. I only want validation on submit. What could be causing this? I just moved our code from version 1.0 beta 1 of the validtion plugin to the latest 1.1 version from the subversion repository. Below is the code to use the validation plugin in our pages:

$.meta.setType( “attr”, “validate” );
$( document ).ready( function() {
var options = { focusInvalid : true };
$( “#MyForm” ).validate( options );
} );

Thanks,

Mark

Hi Jorn,

There still seem to be issues with the blur, keyup stuff in 1.1. I can’t get it to consistently work on any of my sites, so I went and played with your example here:

http://jquery.bassistance.de/validate/demo-test/custom-methods-demo.html

It’s pretty easy to break it. In particular, that first textarea that is required and needs 3 to 15 characters. If you click around and enter various numbers of characters eventually it will either stick on and will never be ok, or it will never come on and it just stops reporting an error.

For me the last version that works consistently with respect to blue is RC 1.

Thanks
John

Great plugin, has anyone used an AJAX callback to validate a form field? I have something like this but i’m not really sure how to handle the async aspect of this

Any suggestions welcome

jQuery.validator.addMethod(“uniqueUsername”, function(value) {
$.get(“${ctx}/members/usernameValidator”, { q: value }, function(msg) {
if(msg != “”) {
// do something cool here
}
});
return true;
}, “${rb(‘register.error.username.unavailable’)}”);

Thanks again for the plugin

Evan

@Mark: Those are now default since 1.1. You could always go back to 1.0 (all releases on jquery.com/plugins.

I have been lazy on documenting those options in detail, sorry about that. To disable onblur-validation, specify onblur: false as an option. Same goes for onkeyup and onchange (which is actualy onclick).

@John: In RC 1 only the do-validation-always-on-this-event option was available. I guess there was no way to break, but it wasn’t very usable either. I’m having an idea on how to reenable the always-validate-on-whatever without too much trouble when someone needs it. Nonetheless I’d like to get the more sophisticated system working. I appreciate your help with this: How exactly can I reproduce the issue you are having?

@Evan: AJAX validation is something I want to get into the 1.2 release. I have some stable stuff working (demo). There is a new “remote” method which accepts an URL, and some additional stuff in the submit-handler to prevent a form submit while requests are still pending. It looks like it is exactly what you need. If you want to give it a try, you can download the latest package. Your feedback is appreciated.

Hi Jorn,

Here’s a simple html page that I can reproduce the inconsistency in:
Fails in both firefox 2.0.0.4 and IE 7.0.5xxx

Test for jQuery validate() plugin

$().ready(function() {
$(“#commentForm”).validate({
event: “blur”
});
});

A simple comment form with submit validation and default messages

Name (required)

E-Mail (required)

To reproduce the problem:
1. Load page.
2. Type characters in the name field.
3. Click into E-Mail and type characters
4. Click back into name and delete all the characters
Fails here – Name doesn’t validate the required:true.

Take 2:

Test for jQuery validate() plugin

$().ready(function() {
$(“#commentForm”).validate({
event: “blur”
});
});

A simple comment form with submit validation and default messages

Name (required)

E-Mail (required)

Sorry, the html won’t show up here, but you can grab it with view source.

I don’t have an external site readily available to put this on for you to see it easily.

Thanks

something wrong is with this plugin when ia have in input class=”{validate:{required:true,number:true}}”

and in js
var container = $(‘div.container’);
$(“#forma”).validate({
event: “submit”,
errorContainer: container,
errorLabelContainer: $(“ol”, container),
wrapper: ‘li’,
meta: “validate”
});
required option works good only on submit but number onblur shows me messagebox with all errors not only for this input

Congratulations for your work. Its realy a good job.
And thanks for shared…..

kakaroto
agencia de web

@Thanks John, I’ll take a look.

@Tomek: The required-rule is ignored for empty elements on blur. That way you can tab through elements without getting annoyed by error messages. I see that there are scenarios where you want to have the validation occur nonetheless for required, I’ll add that option in 1.2.

Hi,

Just implemented your validation plugin, it works great for my needs ( had a bit of a problem getting it to validate an tiny mce editor field, but worked around that now ).

But I have one major problem, have one form and 3 submit buttons, each with a separate id/name. On the server side I use php and in a switch statement perform different actions depending upon which submit button is pressed.

The problem I’m having with the validation plugin is that 2 of the the submit buttons only require the page id and version id to validate (and is not concerned about the rest of the validation ), but the plugin is trying to validate all the other fields.

Is it possible get the plugin to validate certain fields depending upon which submit button was pressed?

here is the code for the validation:

var container = $jQuery(‘div.form_error_container’);
// validate the form when it is submitted
$jQuery(“#commentForm”).validate({
focusInvalid: false,
errorContainer: container,
errorLabelContainer: $jQuery(“ol”, container),
wrapper: ‘li’,
meta: “validate”
});

Thanks in advance

Mark

Thanks for the link to 1.2 (pre-release) I have added it to our development code and it seems to work well in both firefox and safari though I have not had time to test it on IE.

Great work, I look forward to 1.2 final

Evan

@Mark: You can use both expressions and callbacks for the required-method to specify dependencies. Though keeping track of which button was clicked is a bit tricky. I don’t have a solution at hand. It may be worth taking a look at the form plugin, specifically its ajaxForm method.

Thanks for the quick reply.

Will have a play with JQuery trying to catch which button was pressed and store that in a global var and maybe use to to check again?

Thank again

Mark

@Mark: Yeah, something like that. A bit off my head that may help you:

// "global" var
var status;
// track submit button clicks
$("#myform input:submit").click(function() {
	// save the name of the clicked button, there can be only one
	status = this.name;
});
function requiredCheck() {
	// assuming that all inputs are required for submit button "other"
	return status == "other";
}
$("#myform").validate({
	rules: {
		someField: {
			required: requiredCheck
		},
		someOtherField: {
			required: requiredCheck
		},
		pageId: {
			required: true
		},
		versionId: {
			required: true
		}
	}
});

Hi Jörn,
On your test page there is example with ErrorContainer option used. I have two questions regarding this:
1. Is there any way to hide ErrorContainer box when all errors are corrected?
2. Is there any way to validate form with ErrorCointainer only after hiting submit button? (I’ve delete event option and is still update the ErrorContainer div)

Many thanks in advance!
Slawek

Very nice!
Works great in FirFox 1.5 & 2

But it does not work in IE7. The form submit anyway without checking anything … like in the exemples you provides. Is there a trick to make it work?

Thanks

Hi Jörn,

I did a few changes in the code (v1.1) to make it work with arrays in Struts, as well as remove the error container when all the errors are corrected (also in the demo here: http://jquery.bassistance.de/validate/demo-test/errorcontainer-demo.html). Probably same as Slawek’s 1st question?

Added ‘ around id or name in errorsFor() to allow ‘[' and ']‘ in element name / id:

return this.errors().filter("[@for='" + this.idOrName(element) + "']");


This should be done in showErrors() as well:

element: jQuery("[@name='" + name + "']:first", this.currentForm)[0]


This is what I did to remove the error container:

// Return the number of visible error labels in the label container.
// Probably need more checks so it won't break for inline error labels
visibleErrors: function() {
if(this.labelContainer) {
return jQuery(this.settings.wrapper + ':visible', this.labelContainer[0]).length;
}
return 0;
}


And added this to the end of hideErrors():

if( !this.visibleErrors() ) {
this.containers.hide();
}


@Stef: The plugin is supposed to work in IE7. Could you be more specific? Are the demos not working or only your own setup? If so, posting a test page would help alot.

@Gregers: Great patches, thanks. I’ve added the quotes and I’ll give the other proposal a try.

Hi Jorn, I have a new question.

Are there any way to validate the format number¿?

I have a field that should be a number but I would like avoit that the user uses . (like separator) are there any solution?

@oscar: Does the digit-method help?

Hi Jörn,
Any feedback about ErrorContainer option?
Best regards, slawek

[...] Of course the alternative to building your own framework is to use an existing one. This approach yields some important advantages, amonst them the “given enough eyeballs, all bugs are shallow” principle. [...]

I use multiple elements with the same name (… type=”text” name=”someElemAsArray[]” id=”someElemAsArray_1″ value=”"….) to obtain arrays in the backend. How am i able to obtain validation for all those elements and not just one? As i see , this prevents me from doing it:

// select only the first element for each name, and only those with rules specified
if ( this.name in validator.rulesCache || !validator.rules(this).length )
return false;

Any way to obtain validation on (all of) these kind of fields?

Hi Jörn,
I’m still trying the errorContainer option and I figure out, that if I have some value that indicates any error in a form than I could use it to hide errorConatiner when all errors are correct. I was look for such value into even source code, but can’t find anything useful.
Another approach is to trigger some one value during validation process.
Any feedback would be great.
Best regards,
Sławek

Very useful plug-in and I had no need to ask any questions because most of them were answered in the comments. Thanks again for this.

Hi Jörn,

I am trying out your validation plug-in and, although I am still learning it and what it can do, I think that it is a great plug-in.

I do have two questions.

(1) Is there a way to specify that some validations only take place when the form is submitted? I am validating the form as information is begin entered–the behavior that I want. However, I have some additional validations that I only want to perform when the form is submitted (they refer to the relationships of multiple inputs); making these validations during form entry would be annoying to the user. I have two cases:

(A) If a checkbox is checked, then a text field must contain a value and, if the text field has a value, then the checkbox must be checked.

(B) I have four text fields. If any of the first three fields have data, then all of the first three fields must have data. The fourth field is not required, but if it has data, then the other three must have data.

(2) If I write my own additional validation in the submit handler, can I access the error messages for the fields that I find in error at form submit time?

Thank you for your help.

Larry

@Slawek: Thanks for your feedback. I’ll add a invalidHandler-callback (I’m still looking for a good name) in 1.2: It’s called each time a form is submitted and invalid. That should solve a lot of those problems. Though the errorContainer-behaviour needs some tweaking in general. So far that feature seemed to be hardly used, so your further feedback will help a lot.

@Radu: No, currently all names have to be unique for a group of fields.

@Bios: Glad to hear that

@Larry: From your descriptions it sounds like you can handle those requirements by specifying dependencies for any required-rules. That won’t necessarily defer validation until submit, but could work in most cases.

To access error messages: The plugin doesn’t save references to those, instead uses jQuery to search them. Currently the submitHandler is called with just one argument, so for accessing validator-methods for searching those labels you have to save a reference to the validator object that is returned by the plugin method. I’ll work on that to make it easer.

The interesting method is errorsFor(Element): Just pass in an element and you get back a jQuery object containing the error message for that element.

Let me know if this helps you.

Hi Jörn,
Many thanks for that info Jörn!
If plugin already search for any errors in the form, than you can only add some if element. You already develop errorContainer value which manage the visible value of the errorContainer element. So, the simple if command should do the magic: if no error is found in form disable errorContainer element (which must be defined in validation function).

Maybe some extra value will be required. For example. Before validate form some value is always set to for example to ’1′. Then all fields in form will be validate and if any error will be found this value should have ’0′ value. Then at the end of validating function should be if statement. If value=1 hide errorConatainer else show errorContainer.

Best regards,
Sławek

Hello. I came across the need to validate only part of a form, that is, the form elements which were currently visible on a tabbed page. I come up with this, based on validator.prototype.form():

jQuery.validator.prototype.validatePartialForm = function(parentstr) {
this.prepareForm();

var oks = $(parentstr).find(“input, select, textarea, button”); //modified line
for ( var i = 0, element; element = this.elements[i]; i++ ) {
if (oks.index(element) != -1) { //modified line
this.check(element);
}
}
jQuery.extend(this.submitted, this.errorMap);
return this.valid();
}

use it like validator.validatePartialForm(‘#container1′)

@Slawek: I don’t quite get your explanations/examples. Though basically it sounds like most of it is already possible, with just a small modification.

@CBWhiz: That is an interesting approach. I’ll try to integrate the principle into the plugin. Thanks!

Yes, but I can’t figure out where to put it in jquery structure.
Still looking for the best place inside your plugin.
I’ll give some feedback when I found the place.
Maybe you can point me (nr of lines in source code) where is function which handle errorContainer visible value.
Best regards,
Sławek

@Slawek: That is handled in different places. That makes it rather difficult to spot. The interesting line is in prepareForm(): this.toHide = this.errors().push( this.containers );
toHide.hide() is then called in hideErrors().

Hi,

realy nice plugin, but i need help:

i have a form with 2 columns with some input fields. By default, the second column is hidden an can switch to visible.
The input fields are only to validate if this second column is visible, but it doesnt work:

If I submit the form with the hidden second column the validate fires for the second column (with hidden input fields) too.

How can i ignore hidden input fields (inputfields in parent elements there are hidden)?

Best regards,
FUSiON

I am trying to dynamically add/and remove validation rules to a form. Someone else mentioned it in your comments, if this radio is checked require this field. I saw the .refresh method and your example of adding forms fields to a form then making them required which I thought I could use. I am not having any luck though. Here is my code:
var validator;
$().ready(function() {
var container = $(“#appForm div.errorContainer”);
if($(‘#marital_status_married’).is(“:checked”)) {
$(“#maiden_name”).attr(“disabled”,”");
$(“#maiden_name”).attr(“class”,”{required:true}”);
} else {
$(“#maiden_name”).attr(“disabled”,”disabled”);
$(“#maiden_name”).attr(“class”,”");
}
validator = $(“#appForm”).validate({
errorContainer: container,
errorLabelContainer: $(“ul”, container),
wrapper: ‘li’
});
$(“#maiden_name”).attr(“disabled”,($(‘#marital_status_married’).is(“:checked”))?”":”disabled”);
$(‘#marital_status_married’).bind(“click”, function(){
$(“#maiden_name”).attr(“disabled”,”");
$(“#maiden_name”).attr(“class”,”{required:true}”);
validator.refresh;
});
$(‘#marital_status_single’).bind(“click”, function(){
$(“#maiden_name”).attr(“disabled”,”disabled”);
$(“#maiden_name”).attr(“class”,”");
validator.refresh();
});
});

Hi,
The info on the char set would better be included in the main information. It really is annoyiçng that these documents do not work properly with UTF char set.

You should note that the document are ISO char sets, and that you should convert them to UTF-8, , which not always produces the correct results.

Thx, A.

I solved my problem myself:

// check function that returns true or false in relation of the class state
function chkknd2(){
return $(‘.kunde2′).css(“display”) != ‘none’;
}

//here the input field and its metadata for this solution

@Fusion: Currently you can achieve that using by specifying required-rules with dependencies. Take a look at the docs for the required method, there are a few examples.

I’m planning to add an option that allows you to validate only parts of your form with less trouble then specifying dependencies for each element.

@Matt: Same here. Refresh is only useful when you add and remove elements from your form. For anything else, using dependencies (look for the required method in the docs).

@Astuanax: I’m not sure about this one. There were a few encoding issues, but jquery.validate.js should be all UTF-8 encoded.

Thanks for the quick response Jorn.

required method worked great!!! I really appreciate it.

here is another one to take shot at. I have the dependent validation setup. When “Yes” is checked the text field becomes required. Say a user has clicked “Yes” then tried to submit. They get the error saying to fill out the text field. They realize they meant to click “No”. So on the click event for that radio set I would like to recheck the form.

I can do that with validator.form(); where validator is my validation object. What I want to avoid though is calling form() before the form has been submitted once. Is there a way to set some sort of variable to know if the form has been, at least attempted to have been submitted?

Hello Jorn,

Thanks for developing and sharing such a nice plugin! However, I am running into some performance issues (notably with IE7 and Safari). The validation does take place as I expect. However, once all fields are valid and the submit button pressed, it takes quite a long time for the response to show up… allowing the user to click the button several times. Is there something wrong with my code? Is there a memory leak somewhere? Unfortunately, I cannot post a link to my development environment.

I appreciate any help you could give.

Thanks Again,
-Gerard

My form is contained in a Thickbox (iframe), I’m using the Form Plugin and your validate version 1.1.

$(document).ready(function(){
$(‘#ContactForm’).validate({
focusInvalid: true,
errorPlacement: function(error, element) { error.appendTo( element.parent(“label”) ); },
errorElement: “span”,
errorClass: “warning”,
rules: {
first_name: “required”,
last_name: “required”,
email: { required: true, email: true },
phone: “required”
},
messages: {
first_name: “Required”,
last_name: “Required”,
email: “Required”,
phone: “Required”
},
submitHandler: function(form) {
$(form).ajaxSubmit({
target: ‘#display’,
success: resizeit
});
}
});
// post-submit callback to Thickbox – resize the iFrame unless Safari
function resizeit() {
if(!$.browser.safari){
self.parent.$(“#TB_window”).animate({height: 200}, 500);
self.parent.$(“#TB_iframeContent”).animate({height: 200}, 500);
}
}
//end doc ready
});

@Matt: You could check if validator.submitted has any entries. Not the perfect solution but could work in your case. I don’t quite get what exactly you want to do, if you could show me an example page I could try to implement a better API for that.

@Gerard: I can’t see anything obviously wrong with that form. So far I haven’t done any performance tuning on the plugin. An example where actual performance problems occur would help a lot.

The problem of test pages is always the same. And in most cases its possible to extract the interesting parts to produce a working example that concentrates on the actual problem. If you are working with a lot of dynamic serverside stuff, just save the page as rendered in the browser and modify it a bit to get the scripts working.

Hi Jorn,

is there a method to show a loading graphic once all content is valid and the submit button pressed? I’d like to give some feedback to the user and prevent multiple submissions.

Thank you for the great plugin.

-G

You could put the necessary code into the submitHandler-callback.

Jorn, could you show me some example code for the submitHandler callback? I want the submit button disabled only if all fields are valid.

Currently, I am doing this with the submitHandler:

submitHandler: function(form) {
$(form).ajaxSubmit({
target: ‘#display’,
success: resizeit
});
}

Thanks for your help.

-G

[...] Currently I’m investigating ways to leverage those plugins on the server-side too, which is especially interesting when considering the validation plugin. John’s work on implementing a browser environment in Rhino is amazing. It already is able to run the full jQuery test suite, and the possibilities for building web application frameworks based on jQuery are daunting. [...]

I will type up what I am trying to do in a day or so. I think you will understand it better with a better explanation.

Is there a way to disable the keyup validation that happens on default?

Hello,

I have a fix for sending array elements to the server.

modified file jquery.validate.js

idOrName: function(element) {
return this.checkable(element) ? element.name.replace(/\[\]/g, “”) : element.id || element.name.replace(/\[\]/g, “”);
}

HTML File:

$().ready(function() {
$(“#Form”).validate({
rules: {
“arrayFieldName[]“: {
required: true,
minLength: 1
}
}
});
});

A
B
C

Please select one or more

so the server get $_REQUEST["arrayFieldName"] as array

Jörn – great work! i am having a problem i cant figure otu though…

i am building a form, and would like validate a group of fields based on if one of them has a value….. like for a address, city, state, zip – making them fill all fields if they have filled any one of those, if they leave all blank, dont error check. I tried

f_address: { required: “#f_city” || “#f_state ” || “#f_zip” },

f_city: { required: function() { “#f_address” || “#f_state ” || “#f_zip” },

f_state: { required: “#f_address” || “#f_city ” || “#f_zip” },

f_zip: {
required: “#f_address” || “#f_city ” || “#f_state”,
digits:true,
maxLength:5
},

no luck. i am new to jscript i dont know if ‘||’ is the ‘or’. what i am trying to say is if any of these have a value, rerquire all. how would i do this? i cant figure it out ~

mike

@Gerard: How about this:

submitHandler: function(form) {
  $(form).ajaxSubmit({
    $("input:submit", form).attr("disabled", true);
    target: '#display',
    success: resizeit
  });
}

@Matt: You can pass onkeyup: false as a plugin option. Sorry for lack in updates to the docs.

@Guido: Thanks, looks good. I need to check how compatible that really is.

@mike: Those expression have to be valid jQuery selectors. So as long as you aren’t sure if the syntax is correct, just test it on your page. Firebug is very handy for that, just open the Console tab and enter a jQuery selector like $(“f_city”) and you should see what gets selected.

In your case this should work: f_address: { required: “#f_city:filled, #f_state:filled, #f_zip:filled },

If one of those fields is field, the selector returns at least one element, and the field is required.

Note that :filled (and :blank, which selects elements without content, ignoring whitespace) are added my the validation plugin and are not available without it.

Hi,

how can i manual reinitialize the metadata ({required:true}) in the input files if/after i add a new objekt to validate.

bye

fusion

Hi,

i solved the problem with the metadate myself.

Now i have a new Problem:

If i add a new input field with metadata validation tag like ({required:true}) and reinitialize the validator with (validator.refresh), the ‘blur’ validation doesn’t trigger on the new objekt.


validator = $("#addkunde").validate({
event: "blur",
submitHandler: function(form) {
$(form).ajaxSubmit(options);
return false;
}
});


Hi Jorn,
I’m using the validator plug in to populate a UL inside a hidden DIV with the error messages – I then want to display this DIV using jqModal if the form does not validate. How would I execute custom code if the validation rules I have in place fail?

typical. as soon as i post a comment asking for help, i figure it out

for anyone trying to do something similar, here’s the whole setup i used:

debug: true,
errorPlacement: $("#errors"),
errorLabelContainer: $("#errors ul"),
onblur: false,
onkeyup: false,
onsubmit: true,
showErrors: function() {
	// JQMODAL POPUP
	$("#errors").jqm({
		onShow: function(h) {
			h.w.fadeIn("slow");
		},
		onHide: function(h) {
			h.w.fadeOut("slow",function() {
				if (h.o) h.o.remove();
			});
		}
	}).jqmShow();
	
	validator.defaultShowErrors();
},
wrapper: "li"

Plus any rules and messages. #errors is a DIV containing a H1 and an empty UL element to be populated with errors.

Jörn – Thanks for your help, that worked.

However that trick didnt help me overall, I still need to know if there is a way (and the syntax) to use ‘and’ or ‘or’ (&& or ||) in required statements… is this possible? I would write this in another language as:

if (#f_address:blank && f_city:blank && #f_state:blank && #f_zip:blank && #f_telephone:blank) {

// all fields are empty, we need at least one way to contact them
#f_email: required: true;

}

Anyone have any idea how to include a profanity filter to jquery.validate?

I have all my validations working properly, but I’d like to be able to prevent the user from using words like “test” or any other profanity.

Thanks,

Ben

@mike: You can always use a function to determine whether or not a field is required:

rules: {
f_email: { required: function() {
return $(“#f_address”).val()==”" && $(“#f_city”).val()==”";
}, email: true
}
}

I just need this plugin , try is first and say Thks second

Thanks Steven – I am new to jQuery, so it is taking a little bit to get my head around its syntax, butit seems really great. i appreciate your help.

~mike

the newest 1.1 jquery.validate.pack.js do not work in IE6 SP2, it fire a exception, at line 14 and line 15, jquery.validate.js and jquery.validate.min.js works.

I needed to do partial form validation as my form was split into tabs in the tabs plugin. I created this, calling it onClick when switching forms: (parentstr is the jquery selector for the container of those form elements, eg, #div4)

[code]
jQuery.validator.prototype.validatePartialForm = function(parentstr) {
this.prepareForm();

var oks = $(parentstr).find("input, select, textarea, button"); //modified line
for ( var i = 0, element; element = this.elements[i]; i++ ) {
if (oks.index(element) != -1) { //modified line
this.check(element);
}
}
jQuery.extend(this.submitted, this.errorMap);
return this.valid();
}[/code]

I wanted to use red border to indicate invalid fields, so I had to change in jquery.validate.js, line 558

jQuery(element).add( jQuery(element).parent() ).addClass( this.settings.errorClass );

to

jQuery(element).addClass( this.settings.errorClass );

because otherwise I got borders where I didn’t want them.

Please consider this option for a future versions.

ugh. ignore my previous post, it turns out I was using an old version of the validate plugin

I am having a similar issue as fusion. I am creating objects on the dom after the page/form has already initialized and loaded. I am doing this multiple times and will never know if it will be clicked or how many times. This is becuase I am duplicating sections of a travel form for additional travelers, etc…and will never know what the user wants. Rerunning the validator function each time makes the validation work but does not prevent the form from submitting when errors exist within the newly created dom objects. Is there a better way to validate objects that may or may not exist after the page has been set up (perhaps separate validator instances)? This function runs on document.ready and the other objects are created when the user clicks a button:

function thevalidator() {
	 $("#world_wide_travel").validate({
			debug: true,
			errorContainer: $("#errorbox"),
			errorClass: "error",
			focusInvalid: false,
			focusCleanup: true,
			ignore: "",
			onblur: false,
			onkeyup: false,
			onsubmit: true,
			submitHandler: function(form) {
			// get all email addresses for cc'ing
			getdefaultccFromForm();
			// remove stuff we can't see
			$('.hidden').children(':input').val('');
			// get tinymce ready
			tinyMCE.triggerSave();
			// prepare Options Object for ajax submit
			var options = {target: '#SubmitSuccess',success: postsubmit};
			$(form).ajaxSubmit(options);
			return false;
               }
	});
}

Thanks!

i have a form

var container = $('div.errors');			
$("#frmData").validate({
errorContainer: container,
errorLabelContainer: $("ol", container),
wrapper: 'li',
rules: {
  some rules
}
submitHandler: function(form){  						
  $(form).ajaxSubmit({
    dataType:	'json',
    success:	processData
  });
}


function processData(data) //just te see if it worked
{ alert(data.text); }

i trigger the submit using $(‘#frmData’).submit()

now i was wondering if there was a way to not trigger any other effects if the submit still has errors.

The button that triggers the submit also triggers some fade effects that basicly loads the next page. I dont want those te be to performed if there are still errors. But how can i make for example an if statement that checks if there are errors ?

Hi Jorn,

I would like to show warning messages if users enter values outside a given range, yet I want them to be allowed to submit other values even with the warnings.

What do you suggest?

Thank you,
Milano

@Fusion: Thanks for the report. I haven’t considerd that case, but its easy to fix. I need to initialize those event handlers inside the refresh method.

@mike: In that case you could just use plain callback functions, they allow you to use everything that JS provides.

Well, like Steven said.

@douwen: Thanks, I’ll check that.

@CBWiz: Cool, that looks like an interesting approach. I’ll try to find a nice way to integrate that into the plugin, so that it still works with a normal submit.

@Steven: Cool

@Jason: The problem with those event handlers is the same as in Fusion’s case. The other is the problem that you can’t specify additional rules at runtime. That may be a bit less trivial, as long as you can’t just use metadata.

@wolvman: You could start with moving that code into the submitHandler. It is called only when the form is valid.

@Milano: You could try a validation rule a try that always returns true (valid) but uses validators capabilities to display messages when appropiate. You can always do this:

$("#myform").validate();
		 * validator.showErrors({"firstname": "I know that your firstname is Pete, Pete!"});

Call that from within a validation method and it could work. If it doesn’t you need to add some extra stuff somewhere to start the validation and then just use showErrors to display the warning.

Let me know if that helps, if we can get that straight I’d like to add it to the plugin.

I have solved my problem by moving the validator to load into a variable at the bottom of the page (cheesy but it works). I then run validator.reset() and then validator.refresh() within each of the functions that is duplicating sections. This seems to have solved the issue of the submit not being prevented.

My major issue was the basic fact that I need to use the validator object but only after the page was set up. That object needed to be stored some place and if you stick it in a ready() then you have to bring jquery along with it and its a big mess.

It would be nice if I could instantiate the object and then have then have a method available for refresh without having to reference the initial object again. That however seems difficult.

Thanks for the great plugin. I am using it many of my corporations forms and this post is just a testament to how complicated it use can get. It works well (though I wish IE performance was a bit better on large forms). Thanks!

Hello,

I copied the demo you have at:

http://jquery.bassistance.de/ajax-validation/demo-test/milk/

I have made no code changes, but I get the following error (from Firefox’s error console, and it performs no checking):

Error: jQuery.validator.methods[rule.method] has no properties. Line 663.

I would greatly appreciate any insight you have as to what the issue is?

Thanks for writing some awesome plugins!

@Jason: Great to hear you got it working. I’d welcome a more detailed example on how exactly your setup now looks like. That would help a lot, either for others with the same issue or for me to provide an easier solution that can be integrated into the plugin.

About performance issues: That is on the todo list, so far I didn’t bother at all with performance tuning, so there should be quite some potential to go for. In the worst case I need to use native DOM methods directly, but with the current testsuite it should be pretty obvious where that works out and where not. I hope I can provide a boost in performance with the 1.2 release.

@Chris: Did you also copy jquery.validate.js from that site? If not, try that, or the latest revision from SVN. That demo won’t work with the 1.1 release.

Hello Jorn,

Thanks for this wondeful work. Very much appreciated. I gave the ajax validation on http://jquery.bassistance.de/ajax-validation/demo-test/milk/ a testdrive but somehow it doesn’t work smoothly in IE6 when the required is set dependent on wether another field is filled. The form is submitted in IE anyway. In firefox it works fine. If I change the required to true than it works fine in both browsers.

so: required: ‘input#zipcode:filled’, doesn’t work
required: true does work

Regards,
Fnoppie

@Fnoppie: Thanks for the report, I’ll check that.

If i try to use any of the validators provided in additional-methods.js FF gives me a JS error “this.depend is not a function”. Can anyone help me with this?

first of all: great work Jörn!
I’m looking forward for the 1.2 release because I need the remote-ajax-check.
I don’t know if it’s already a known bug, but the remote-check in this demo
http://jquery.bassistance.de/ajax-validation/demo-test/milk/
isnt working correctly:
If you input a username that begings with a invalid one (like Peterr) and the onkey-check is active, you just need the right timing to display the error-message for a valid username: “Peterr is already in use”. If you now move the cursor or blur the field it becomes valid again.

You can reproduce the bug as follows:
enter something in the username field
defocus it
delete it (so now the onkey-check is active)
enter “Pete” and then really quickly “rr”, you’ll see that the error message keeps displaying “Peterr is already in use”. Now move the cursor or defocus the field: Peterr is now valid

It would be great if we could specify an animation for the labels. It is already possible to animate them while showing, but for hiding them, it simply disappears. I went through and changed every “hide()” to “fadeOut()”, but it would be better if that was customizable. Perhaps an entire “errorHide” function to be executed whenever the error should be hidden, just like “errorPlacement”.

Walking through the code to get ready for implementation I noticed
non-English words in critical sections. It may be me though:

in “xx.validation.js” : part of the regex (line 1142) is an example:
9](\.?[A-Z0-9ÄÜÖ][A-Z0-9_\-ÄÜÖ]*)*(\/([A-Z0-9ÄÜÖ][A-Z0-9_\-\.ÄÜÖ]*)?)*(\?(

Clearly it is possible to guess the English equivalents but a friendly alert for you and others also.

Similarly there are lines (7 and 9) in the “additional-methods.js” although less critical.

@phpsc: Could you give the latest revision a try?

@Klaus: Thanks for the report! I’ll check that.

@Ian: Yep, great idea. And those animations would be more then just eye-candy: Its easier to see where error appear and less disturbing than having them just popup out of nowhere. I’ll try to find a nice way to make that customizable.

@Bud: Right, that is far from perfect. I’ll try to tune those a bit. Encodings are alwyas a tricky part for me.

I have two submit buttons on a page: Cancel and Submit. I really only want to perform validation when the “Submit” button is clicked. If cancel button is clicked, I want the form to be submitted (but no validation to occur). What is the easiest way to accomplish this?

@denny: Add a class “cancel” to the cancel button. Easy ‘nuf?

Hi,

I am currently using this plugin, which is working great, but when I switch over to another text field, the error rules are run.

For example, I have a email input box, if the email is entered incorrectly, and the user then switches to another input box, e.g. for “age”, the rules are run, and it says that the email was entered incorrectly, is there any way to prevent this.

I only want the rules to be checked when the user clicks “submit”.

I have defined my own method which sends an ajax request to check a db value, and I want this method to be run as few times as possible.

Thanks.

@Asad: You can disable validation onblur and onkeyup by specifying options onblur: false and onkeyup: false. Sorry for not updating the docs for 1.1 on that.

Hi Jörn,

First, I thank you for your previous responses to my questions and once again complement you on such nice software. My new question may just be the result of my own ineptness with your tools.

I am using the validation package with a form that has a file upload element. I am applying just the standard ‘require’ rule to the element to ensure that the user gives me a file before successfully submitting.

The problem is that the validation code does not seem to recognize that a browse selection has been made. The problem occurs if the user does the following sequence. Click the submit button without a browse selection; this shows the ‘require’ error message as expected. The user then browses a selection (the error does not go away after this action) and immediately clicks the submit button again. Now the error message finally goes away but the form does not submit. A second click of the submit then actually submits.

I think that the validation code is simply not getting an event when the browse action occurs.

I would appreciate any enlightenment on my ignorance.
Thanks,
Mike

@Mike: That sounds a bit weird. Odds are good that its related to the file input. I have to reread on the topic, but basically (some) browsers restrict access to the value of a fileinput. I’ll look into that.

[repost; this time, html-encoded]

This is a very useful plugin, thank you.

Is there any way to change where errorClass is applied? There’s no parameter, as I understand the code, but perhaps you know of a jQuery trick I can use?

Here’s an example to show what I mean. The <div>, <p>, <input> nesting is necessary for other reasons, so we should assume that I cannot do without it.

The HTML:

<div><p><input id="password" type="password" name="password" /></p></div>

..would become the following when it fails validation:

<div><p><input id="password" class="error" type="password" name="password" /></p></div>

..but it would be immensely useful to have the class applied to the grandparent div instead:

<div class="error"><p><input id="password" type="password" name="password" /></p></div>

Any suggestions welcomed!

Followup:

One way to accomplish this is by searching for each statement that adds/removes "this.settings.errorClass", then appending ".parent(‘p’).parent(‘div’)" to the element.

For example:

jQuery(element).addClass(this.settings.errorClass);

becomes:

jQuery(element).parent(‘p’).parent(‘div’).addClass(this.settings.errorClass);

Obviously this is specific only to my implementation, and isn’t a viable long term solution. Sorry, my JS isn’t quite so skilled to be able to make this more generic yet.

We have several jQuery plug-ins that have an image after the input part of the control that the user clicks on to perform some action. For example a calendar edit plug-in has a calendar image after it for the user to click on to display the calendar. Many of these images are placed using the jQuery after() method. Some of these plug-ins we wrote and some are by other authors. When the validation executes and the error message is displayed, the message is displayed between the input part of the control and the image forcing the image to display below the input and the error message in the page. Although everything works as expected, it does not look very good. Is there a generic way for me to detemine, using the validation plug-in, if the control being validated has an associated image after it and to display the error message after the image instead of after the input part of the control?

@Dave: That is really difficult to solve generic without great complexity. I had some code similar to yours that just added the error class to the parent, but that caused a lot of problems where unwanted. I’ll try to find a better solution.

@Mark: Please give the errorPlacement-callback a try. Its called for each error-message-element. If not specified, the plugin just does label.insertAfter(element). Something like this should do the trick:

$(...).validate({
	errorPlacement: function(label, element) {
		if ( element.next("a").length ) {
			label.insertAfter( element.next() );
		} else {
			label.insertAfter( element );
		}
	}
});

Thanks, Jörn. The easy stopgap measure is to modify the code directly and hope that the .parent() relationship exists everywhere it’s used… a fair assumption in this case.

If I’m able to find an elegant solution (and the time to do so), I’ll let you know.

Cheers

Hi Jörn,

The plugin has been working great for me. I tried using the “remote” method to validate whether an email address already exists in our system. I am also using ajaxSubmit in the submit handler. However, it seems that sometimes the form gets submitted even when an email exists. In that situation, I get the success message I defined as well as the remote error message.

I have a feeling the form is not waiting for the server response before submitting but I’m not sure what to do to fix it. I noticed when you first mentioned the new remote method you mentioned “some additional stuff in the submit-handler to prevent a form submit while requests are still pending.” Are these in place or do I need to do something in the submitHandler in order to get this functioning?

Any help is greatly appreciated.

Thanks,
Anthony

Hi Jörn, I’m having a few issues with your plugin. I’m validating a large number of elements (60) via metadata and when you go to the page firefox gives the option to abort the script as its find it to be “unresponsive”.

If I add this line of code:
$.meta.setType(“attr”, “class”);

then the error doesnt occur, but the validation plugin stops working :/ so really it could be the metadata plugin or validation.

Was wondering if you could shed any light on this.
thanks

Hi, this plugin is working fine, its great

Im trying to use a list in my form, with options 1,2,3,4,5, and after this choice will appear 1 to 5 forms

I would like to know how can i do this ?

I try with adding this to the javascript, doing the same way thats nezsletter topics in the example

var nbcred = $(“#nbcred”);

var form1 = $(“#form1″)[nbcred.minValue("1") ? "show" : "hide"]();

nbcred.change(function() {
form1[this.minValue("1") ? "show" : "hide"] ();
});

And in the html :

0
1
2
3
4
5

Email

Im only trying with one form for the moment, but it doesnt work…
I think im not using well the minVallue…

thanks

Hi, Jörn.

Congratulation for plugin. I have used this plugin in all my projects.

I bug that i see now is when i have a form with element’s name in array format and a wait validate it. When occurs errors, only the first element’s error of array is showed, because on plugin is verified only the element’s name and don’t the id.

Is there a demo with validation and tabs plugin working together?

[Follow up to my earlier post]

Jorn I tried using the latest “additional-methods.js” from the svn as you suggested. First of all there’s an error on line 10, you have missed opening bracket “(“. I fixed that myself. But it now gives me error “this.optional is not a functional” if try use any validator from it. I am using all default setting and giving the validator names in class as in the first form of your example page. Can you include the “additional-methods.js” in your examples and use a validator from it ?

I was prepare demo with tabs-form-validation on one page.

http://www.netix.sk/forms/test.html

It works perfect in Firefox, but in IE does not work.

Hi,

I am having a bit of an issue with validation.

I have two drop down lists, selecting the first populates the second using Ajax.

Initially the validation works, but when the second drop down is populated the validation breaks.

Any suggestions to get around this?

Thanks.

Hi Jörn,

when using the browser search function to search within this page, your footer “Best viewed with both eyes open!” is always covering up the search results, as the browser scrolls down just to the last line. So actually this page would be viewed best without the “best viewed” bar

Eyes all open,
Bernd

Hi Jörn,

when changing your demo-test/index.html to use your example of
$(“input”).validate({
event: “blur”,
success: “error”
});

the form isn’t validated on blur. I expected the form to be validated when an input element is losing focus, which it doesn’t.

Am I doing something wrong here?

Thanks,
Bernd

I tried the additional method named ‘alphanumeric’, and it doesn’t seem to be working. The following is the code in my form:

alpha

I added the script, , but it still doesn’t work.

Any help is appreciated.

This is a great plugin.

phpsc said, “Can you include the “additional-methods.js” in your examples and use a validator from it ?”

I would appreciate an example like this as well.

Are there plans to add this to the ‘core’ code in jquery?

I wold like to know why jQuery validation plugin doesn’t run in IE when is used jQuery 1.1.3. IE generate “Object doesn’t support this property or method” error

great plugin, thanks so much!

Hi,

I’m having some issues with Radio buttons and the display of the error.

Here is the HTML:

Any Ideas?

http://paulihrig.com/SolutionsApplicantAssignment/default.cfm

OK – first post.
the insert validation works just fine, in all browsers.
but the Update Validation on a 2nd form does not seem to work in IE 6
every thing is great in FF and Safari

it should flag fields that are null/blank on submit..

have been cluncking around with the example code all day..
thanks!

-paul

why would a hidden field cause it to crap out?

ok. got around it after masking the id in a url var.
but shouldn’t this work for field type=hidden

input name=”id” type=”hidden” value=”#INTID#” class=”{required:false}”

i tried the example where you name all your errors & define the required validation, but couldn’t get it to work..

Hi,

Just downloaded your plugin and had a play with it. Have to say I’m very impressed! Excellent work and many thanks! I’ll have to include this on all my forms from now on… It even validates ok!

Thanks,
Tom

The latest SVN version does not pack well.

Jorn,

I’ve run into an issue while trying to use your plugin. I wonder if you can advise me on how you’d tackle it.

I want to submit a form with the usual jquery meta-validation … but, i want to also protect against double submits on the client side.

So, the way I usually do this is: on click of the submit button, only IF the form is 100% valid!, then just before it submits I want to change the text of the submit button to ‘please wait …’ and disable it.

‘only IF the form is 100% valid!’ tells me i’d like to use the SubmitHandler for this but the form in question is not an Ajax form, so i’d have to manually submit the form. Doing so currently causes major recursion/memory errors in IE, FF and Safari… though besides that, everything seems to work. Any suggestions?

Great plugin! I was just wondering why the demonstration page does not accept plus-addressing. Like . These are valid e-mailaddresses and I think RFC 2822 describes this .

@Dave: Yeah, I hoped so too, and immediately got a report where that broke everything.

@Anthony: The remote-validation isn’t stable yet, therefore no official release. I think I’ve now found an elegant solution for the synchronization issues you experienced. I hope to get 1.2 released soon. Once it works there is nothing you should have to do apart from specifying rules and your submitHandler as usual.

@Alli: I haven’t yet optimized the plugin for large forms, but plan to do so. 100 inputs in a single form aren’t that uncommon. To avoid the metadata-parsing-overhead you could specify rules as plugin options, though I guess that makes it harder to generate them on the serverside.

@fwdi: You are mixing validation methods with usual jQuery code. That won’t work. Please refer to docs.jquery.com for documentation about jQuery.

@Estevão: Array elements will be supported in 1.2!
Could you post a test page for your IE problem?

@Miro: Thanks for the test page. I’ll try to set something up that works also in IE.

@Asad: Can you provide a test page for that? Would help a lot!

@Bernd: I’ll remove the, you are right, its really annoying.
The blur-validation doesn’t work that way. Currently the element is always validated on blur, though not when it doesn’t contain anything yet. I’ll improve that in 1.2 so that you can explicitly configure to always validate on blur.

@Tom: I’ll work on tests and documentation for those additional methods.

@Dave: Your HTML didn’t come through (I’ll work on that, too). Could you mail me the code or post a test page?

@paul: What are you referring to with “update validation”?
There is a little stupid issue with the required-method: It doesn’t matter what you specify as a paremter, once its present, its always required.

@pbcomm: Yeah, gonna fix that. Thanks for reporting.

@Thijs: I had some rather complex regex included for email-validation. I had to remove it to get the plugin working in Rhino. Any help on finding a correct email-regex that works both in browsers and in Rhino is highly appreciated.

It appears your current plugin v1.1 doesn’t work with the latest jquery v1.1.4. It works great with v1.1.3.1.

@Justin: At least the latest revision works with 1.1.4. Is there a specific error?

Here with IE doens’t work with new 1.1.4 jQuery. But FF works.

Hi Jörn,

I am referring back to my post (and your reply) on 07 August at 02:08. It appears to me that there are no JS events triggered when the user uses the Browse button to select a file for a file input element. If this is true, I do not think there is a way to reliably apply a validation rule to a file input element. Does this make sense to you?

thanks,
Mike

Hi! have some problem getting validator to work on konqueror 3.5.5 (Mozilla/5.0 (compatible; Konqueror/3.5) KHTML/3.5.5 (like Gecko)).

Testsuite say:

29. validator module: hide(): container (1, 2, 3)
1. Error label not visible at start

I have problems with 1.1.4. & IE.
The “error label” doesn’t appears in combobox

This is working fine in FF2 and Safari, but I can’t get it to work in IE6 or 7 – I’ve compared mine with the demo line by line and have tried all the suggestions above, and still no luck. Can anybody figure this out?

intercession.iamdanielmarino.com/test

Thanks
Dan

Hi Jörn,

Your plugin is awesome. I have been searching though for how I can escape a value that is in there and treat it like it is null. For instance I have a text input like this:

FYI, there are some onblur/onFocus to remove/insert the “instructional value” in it as well but not shown above because I don’t think they matter to my question – if needed let me know.

In my validation, how do I treat the “instructional value” as a null so that it will still be flagged as a null. I know how to do it simply with std js just not with your plug in.

I need something kind of like this but not sure how to do it or if there is a better way (new method notEqualTo):

Thanks,
Jeremy

Hello!
I have a question: how I can replace default error messages (for example message that shows if ‘required’ validator fails)?

Hi Jörn,

I’m having a bit of a problem:

I want to attach a function for a maxValue field but I can’t get it to work. I’m wondering now if it is supported at all? (it is for the required field)

I’m trying this:

a_field: {
digits:true,
maxValue: getNP_Val,
required: true
}

…

function getNP_Val() {
return $(‘#depend_field’).val();
}

Thanks,

Mike

Hi!

I can’t get validator to work with jquery version 1.1.4…
I don’ seem to be the only one with this problem. Does anyone have any idea?
I’ve posted an example in http://69.80.208.158/demo1/validator/ with both jquery 1.1.2 (works fine) and 1.1.4.

thanks,
antonio

I have the same problem Antonio. The errormessages show up fine in Firefox, but not in IE…

hi Jerem

i have same problem with u, follow is the additional method. hope can help u.


jQuery.validator.addMethod("notEqualTo", function(value, element, param) {
return $(param).val()?(value != $(param).val()):(value != param);
}, "error");


Sure ima not the first, but when somewhere in the form exists an element with name and/or id =”cancel”,is impossible to validate it!

Hope it can be fixed.

i’m having the same jquery 1.1.4 issues as antonio and mike. i have tested against jquery 1.1.3 as well, and added opera to the mix. all appear to be working well, w/ the exception of jquery 1.1.4 + IE 7 (haven’t tested in IE 6).

for jquery 1.1.4 , the validation plugin ‘s showLabel method must be modified .
the line

label = jQuery(“”)

should be replaced with

label = jQuery(“”)

then u can see errormessages under IE again

oops , why the codes above being filtered out

replace the line in method “showLable”

label = jQuery(“＜” + this.settings.errorElement + “＞”)

with

label = jQuery(“＜” + this.settings.errorElement + “＞＜/” + this.settings.errorElement + “＞”)

note the SBC case should be replaced with DBC case by yourself.

check this out:
http://www.zeali.net/entry/534

IE7 validation issues…
Hello, I am using the latest version of jquery and your plugin. I have included the exact same files and functions listed on your sample page. And I have followed every example and suggestion I can find and yet still validating dropdown boxes is not working right in IE7. It works fine in Firefox 2. The text input box validation works fine in both browsers. The problem is not that it is not checking it, it is that It will not display my error message at all in IE7, yet FF2 shows it just fine. It does however prevent you from proceeding until you have filled in all of the required drop down inputs.

I wish I could just have all my users run FF, but that is not possible. Most run either IE6 or IE7. I have already tried multiple variations on the “ISO-8859-1″ parameters and metadata, but that doesn’t help at all. Any suggestions? Ideas? Places to look?

Thank you for an excellent script!

I am trying to use my own submitHandler which submits the form/results into a div on the same pages:

submitHandler: function send(){
var params = Form.serialize($(‘signupForm’));
new Ajax.Updater(‘signupFormdiv’, ‘help.php’, {asynchronous:true, parameters:params});
}

I have tried the following submit buttons:

and

but still the form posts to a new page instead of displaying in a div on the form page??? Any help getting the form results to post to a div on the same page using the above send() function?

Many thanks and regards

@Justin, Giuliano, oscar, Zeal: Thanks for the reports. The trouble with IE and jQuery 1.1.4 is now fixed in the latest revision and will be included in 1.2.

@Mike: Yeah, that makes sense. But at least the blur event should be triggered, shouldn’t it?

@Bacon: I don’t have access to a Konquerer testing enviroment. This may be related to the above IE issue, could you give the latest revision a try?

@Dan: The demos are still with jQuery < 1.1.4. Some change in 1.1.4 broke the error display in IE. See above for a link to the latest revison.

@Jerem: There are interesting techniques to display labels above input fields and hide them when the field gets focused. There is a good article on A List Apart about it.

@NNT: The default messages are stored in jQuery.validator.messages. Just assign something else to jQuery.validator.messages.required for a different default message for the required method.

@Mike: The maxValue method currently supports only static values, no callbacks. But the idea is interesting, I’ll take a look if I can find a nice solution for that. Until then you could just write your own validation method. The implementation for maxValue is very simple anyway.

@Antonio, Mike, Patrick, Dave: Same issue as above, solved in the latest revision. Sorry for the trouble.

@Georgi: Do you have a test page for that? I just gave it a try, and hadn’t any problems.
There is some special code to deal with submit buttons with a class “cancel”, but that shouldn’t affect normal inputs at all.

@Claude: Could you post a complete test page? The snippet you posted is not enough to find the problem.

might I suggest that on line 757 of jquery.validate.js you change it to:

: this.settings.success( label, jQuery(element) );

providing a reference to the element that succeeded validation has proven very useful to me…

Thanks, that fixed the IE problem.

@Steve: Good idea, I’ll add that.

@Patrick: Cool, thanks for reporting.

Hello,
I have problems figuring out how to set up validation on a form that gets multiple inputs generated dynamically. Is there a way to add rules not to a specific input in the form but to a jQuery selector that matches all the inputs given a pattern?

Example,

$(...).validate({
rules: {
// this selector matches multiple inputs that have ID attribute
// starting with "something", example:
$("input[@id^=something]"): {
required: true
}
}
)};

My brain is about to SIGFAULT

Thanks a lot for this great plugin.

Hi Jörn,

Right now I have a password recovery page which, when the user enters their email address, the recoverpassword.php page outputs to a div without page refresh using the following script:

function send(){
var params = Form.serialize($(‘TestForm’));
new Ajax.Updater(‘passwordformdiv’, ‘recoverpassword.php’, {asynchronous:true, parameters:params});
}

Login Details Have Been Sent…

What I would like to do is include validation into this form and when the form is submitted have the recoverpassword.php page output to the “” area using the send() function.

I have tried the following to no avail – recoverpassword.php opens in a new page instead of in the :

jQuery.noConflict(); var $j = jQuery;

$j(document).ready(function() {
$j(“#TestForm”).validationAideEnable(null, send);
});

function send(){
var params = Form.serialize($(‘TestForm’));
new Ajax.Updater(‘passwordformdiv’, ‘recoverpassword.php’, {asynchronous:true, parameters:params});
}

Basically what I’m after is to have the form validate as usual then upon clicking the Sumit button execute the send() function.

Could you provide any info as to what I’ve done wrong (I’m very new to ajax.js!)

Many thanks for your time, Claude

oops – my “form” has been stripped from the above post:

START:

form id=”TestForm”

INPUT type=”text” name=”email” size=”30″ value=”"

input type=”button” onClick=”send();” value=”Submit”

END form

@Jörn: Thank you for help!

Hi,

quite a stupid problem.
I am using the plugin to submit an easy form:
I want to bind the success validation to a function that render visible a loading bar.

So simple validation code:

$().ready(function() {
$(“#treeform”).validate();
});
Function bind to submit form:

$(document).ready(function(){
$(‘#treeform’).submit(function(){
$(‘.loading’).css({visibility:’visible’});
});
});

An idea to make the second happen only if the validation process is ok?

Thanks

Andrea

Thank you for this wonderful addition.

I would like to add validation based on ajax returned values, such as if a username is already taken or is available.

Could this be done using this plugin?

If so, any pointers?

I found a similar post above and have been able to implement this using remote:

Thank you again for your wonderful plugin!

Hi,

how may I bind a function to fire only if the validation process is succesfully.
I mean I need to fire a function only if the form fileds are validated and forms will be submitted.

Thanks for any help

Andrea

Hello,

This is excellent script, thanks.

When i open this [http://bassistance.de/jquery-plugins/jquery-plugin-validation/] page in Firefox2 latest version it displays blank, then i use Opera then only i got this page.

thanks.

@zero: You could just generate those elements with metadata, that way you don’t have to specify the rules explicitly via the rules-option. You need the metadata plugin for that to work. There are plenty examples, and the syntax is nearly plain JavaScript. Let me know if that works for you.

@Claude: It looks like you are mixing a lot of stuff, but I can’t see this validation plugin in use anywhere. Have you tried to use the jquery form plugin together with this plugin? There is a demo page that shows how you can integrate those two.

@Andrea: Just use the submitHandler-callback. That is called only when the form is valid.

@Chris: Great to hear the remote validation works for you, even without being officially released yet. I’ll try to get 1.2 out the door as soon as possible.

@palPalani: Thanks for reporting that. Unfortunately I still have no idea what the source of that ugly issue is. Its really annoying.

Hi Jorn,

I think jQuery version 1.1.4 has just broke your code in IE6. Can you help to verify this ?

@zeal: Thanks for that! Now the error labels are showing up in IE7

@Roland: Yes. This is fixed in the latest revision. Sorry for the trouble.

is there a way of throwing an error if some one leaves a drop down list on “select country”, in the code below? couldnt find this in your examples. excellent plugin btw, i use it on plenty of projects.

select country
germany
etc

@stef: Just define a required-rule for that select and set the value of “select country” to an empty string. There is a demo with selects available.

Hi Jörn!
Thanks for the great plugin!

I’m still having trouble with the error labels not appearing in IE6, even using the latest revision of the plugin.

If you could take a look, here is my code: http://paste.lymas.com.br//?q=7370

It works perfectly in FF2 (damn IE…).

Tks!

Hi,
I’ve tried to use the latest trunk version for validating a sign-up form together with jquery 1.1.4, but I cannot get ajax validations to work properly. I suspect your milk-testcase will break on jquery 1.1.4 aswell. I tried to replicate the milk test as closely as possible but it did not work with jq 1.1.4–when I switched back to 1.1.2 it did work, at least with the version of validate.js that was used with the milk demo.

What happens is that when an ajax-field is correct, validate seems to run through all fields and highlight them with error messages, when it should really just show an error for the ajax-field.

Browser is FF2.0.0.6 on os x

Any ideas on this?

I have the following code…….

This is just like your example only I’m trying to add a class to errorLabelContainer when some isn’t valid. What happens though is that class appears to be applied right away. Any idea why?

Jörn,

Please, forget my previous comment. That was something I was doing wrong… The plugin is working perfectly also in IE6 now.

Sorry for the inconvenience (and my poor english… I speak portuguese).

Tks!

I am new to this plugin. It looks great so far. I want to find out what is going on here because I must be missing a variable or something.

I just want to do some very simple validation, such as:

$(“#fss_form”).validate({
errorClass: “invalid”,
errorLabelContainer: $(“#jsFormValidation”),
wrapper: “div”
});

It works fine, but after I submit a form that is not valid, I get an error message, which is good. But then when I go to fill in that specific form field which was invalid, when the form becomes valid, my entire container gets set to display:none and the page appears to disappear?

Any idea what I am missing ? Thanks in advance…

@Eric: I need to run some tests with ajax validation and 1.1.4. I hope to get 1.2 out the door soon, expect it to be fixed then.

@MichaelN: Your code selects the element, adds the class, and then passes the result to the validate plugin. Thats the way jQuery works. What you want to do is add the error class to the error container when it is invalid, right? I’ll look for a solution for that.

@Matheus: No problem. I’m glad to hear it works!

@Buster Rhymes: The error container is automatically hidden when the form is valid. Moving the container out of the form (above or below it) should fix the problem.

Here is a sample function based off one I wrote in PHP for validating a US phone number. I like it better than the one from May, because it is actually validating a phone number and not just ten digits.
matches things like
1(212)-999-2345
or
212 999 2344
or
212-999-0983

but not
111-123-5434
and not
212 123 4567

jQuery.validator.addMethod("phone", function(phone_number) {

        // matches US phone number format
        // where the area code may not start with 1 and the prefix may not start with 1
        // allows '-' or ' ' as a separator and allows parens around area code
        // some people may want to put a '1' in front of their number

        phone_number = phone_number.replace(/\s+/g, "");

        if (phone_number.length <= 9) {
            return false;
        }

        if(phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/)) {
            return true;
        }
        return false;
}, "Please specify a valid phone number");

Thanks Matt! I’ll add that one to additional-methods.js.

unfortunately, my method did not allow for blanks so phone would have been always required.

I would change

if (phone_number.length <= 9) {
return false;
}

to

if (phone_number.length == 0) {
return true;
}
else if (phone_number.length <= 9) {
return false;
}


and I wrote a method for a US zip code:

valid zips are either five digits or five + four digits (with optional ‘-’ or ‘ ‘ between)


jQuery.validator.addMethod("zipcode", function(zip) {
// matches US ZIP code
// allow either five digits or nine digits with an optional '-' between
zip = zip.replace(/^\s+/, "");
zip = zip.replace(/\s+$/, "");

the question this brings up is the naming of the methods? In the US it is called a ZIP code, but the better generic term is postal code, so don’t know if you want all your functions to be US specific, but the naming of this method assures it is valid for US only.

@Matt: Thanks for those additions.
The naming isn’t an easy task. So far I used name + locale, eg. dateDE, dateITA, which isn’t perfect either, but at least its obvious.

Im trying to create a custom method that will take the value and lookup the value in a database and then confirm if the value exists or not.

Sadly i cant seem to get it to work correctly – the code is below

jQuery.validator.addMethod(“usernameCheck”, function(value, element){
$.get(‘/ajax/usernames.php’, {q: value}, function(data){
if(data == “true”){
return false;
}

return true;
});
}, “This username has already been registered”);

( http://pastebin.ubuntu-uk.org/398 – for better highlighting )

It just return the custom error msg each time

That is exactly what I want to do Jorn. Second question though.
One of the examples I looked at had a div that contains and ol. When an item is invalid the div goes from hidden to displayed and an error is inserted into an li element. When the item is no longer invalid the li is removed but he div is still displayed. Is there a way to make the div go back to hidden as well? (This is from the errorcontainer-demo.html example) Thanks.

@Phunky: The latest revision provides a remote-method – that should do exactly what you need. Usage is very simple, just specify a rule like this:

$("...").validate({
  rules: {
    username: {
      required: true,
      remote: "ajax/usernames.php"
    }
  }
});

The value is sent as a parameter “value” and the method expects are boolean return value, eg. true, false, 1 or 0. There is also an example.

@MichaelN: I’ll look into that as well. The error container options definitely need more work to get them into a useful state. Your feedback is highly welcome!

@Jorn: Thank you, that is great it works a treat now

@Jorn: Thanks so far I love this library.

Upgraded to jQuery 1.2, now error messages don’t display in IE6/7. FF, as usual, is just fine. Form elements still change classes (red outline) with no problem, but the actual message that gets appended to a new label after the element does not show.

Here is my code:
jQuery().ready(function() {
jQuery(“#Fundraising”).validate({ submitHandler: sendMyForm });

Nothing spectacular.

Anyone else seeing this?

Hi, I am usig your plugin but I have one question, I make a json with the same characteristics of the validator map, but when i assign to form validate it seems to don’t do anything…..is something like this:

jsonValidate = “//…string json build…//”;
$(“#myform”).validate(eval(‘(‘+jsonValidate+’)')).form();

alert(jsonValidate) [type string (previous eval)] => result:

{
“errorElement”: “div”,
“errorClass”: “field-error”,
“rules”: {
“add_manual_name[1]“: {“required”:”true”},
“add_manual_email[1]“: {“required”:”true”}
},
“messages”: {
“add_manual_name[1]“: {“required”: “put name”},
“add_manual_email[1]“: {“required”: “put email”}
}
}

i need some help please!!!

@ Jörn:

Have you considered coding to allow the new div to be a floating pop-up off the submit button?

I ask, because that’s exactly what I’m attempting to do – I’m hitting a few roadblocks, bu tI know it’s the limitations of my knowledge, not the plugin. If I can’t figure it out soon, I’ll post my code and see if you can see something I can’t.

Hello again. I am running into an issue where I cannot validate the inputs in a row that was cloned (using jQuery) from a hidden row. I have three inputs: length, width, and height. On the same form at the same time the validation for drop downs and text inputs work just fine. The just don’t work in the text inputs created with the clone tool. I have to do this so that I may add as many items as the user wants to the screen at any moment before the form is sent to the processing script.

I have tried it in IE and Firefox and it simply doesn’t work. I am using the attribute class=”{required:true}”. Any suggestions or is this something the validator cannot do right now?

Here is the javascript function that creates the new input fields:

blank = $(‘tr.hiddenpallet’);
newitem = blank.clone().insertBefore(blank).removeClass(‘hiddenpallet’);

This is wrapped in a ready function. I have tried the class with and without the first class name (ex. class=”len {required:true}” and class=”{required:true}”).

The curly braces surrounding the required:true seem to work the best for my site and they have worked on everything up until now.

Thanks,
Patrick

Hi Jörn,
Thanks for the great plugin.

I have bumped into an issue I hope you could help with.
I’m trying to use validation and blockUI at the same time on a form – actually I’m using lot’s of plugins on the form (jquery.form.js for ajax, jquery.maskedinput.js, and jquery.blockui.js).

I could get them work together except that blockui fires even if the form is invalid. What happens is that by submitting a form with blank required fields, the error message is displayed beside the invalid input, but the blockui is fired and freezes the page.

I think before firing blockui I should check if the form is valid. Currently I have put the blockui trigger inside the pre-submit callback of jquery.form.js which handles the ajax submission.

Is there a method to check if the form is valid so that I use it like this?

if (formvalid) {
…
$.blockUI();
return true;
} else {
return false;
}

One more thing – I need to retrieve json from the server in response to my ajax call and it is very easy to do that with jquery.form.js; so I cannot leave that and use ajaxSubmit as is in one of your examples. (actually, ajaxSubmit might be as powerful as form.js, but I have very limited experience in js and have to resort to modifying examples and code samples).

Many thanks,
Majid

Hmm. I’m glad you’re not using that validator on your comments, because it doesn’t like my email address.

“+” is a legal character in email addresses (really, it’s amazing how little isn’t a legal character…)

Is there any reason why the remote method triggers all error messages to display when you have corrected it’s error?

Try your demo page – Type Peter, then removed the “r” all the error messages will display for the other items.

Did jQuery 1.2 just broke your code ?

The onKeyUp validation is not working. Meaning that when it first validate, there will be error messages prompting beside the form element. When the user try to correct the data, the error message doesn’t remove by itself where your demo actually removes those messages(meaning revalidate the data again). I am testing on jQuery 1.2, please verify on whether your plugin supports jQuery 1.2 or not.

Thanks a lot.

The error messages ain’t appear in IE6 as well.

Hello, first … thanks for this great plugin, it’s a savior for my project.

At first, I thought it was working perfectly, but I noticed if I submit the form and the form has no errors, it works as I would expect. But if I submit the form and have an error, after i fix the error and click submit again … it submits the form twice.

It seems to queue up the submissions … if I click submit and have to fix errors 2 times, on the 3rd click of submit it posts the form 3 times.

I ‘m using the Form plugin.

The form is loaded dynamically into the page via load(). I might not be understanding ‘binding’ or something … I don’t know.

Here is the code I use to trigger the form that’s dynamically loaded in.

if ($(event.target).is(‘.buttonName’)) {

var form12 = {
target: ‘.myDiv’,
url: ‘form-processor.php’,
type: ‘post’
};

$(“#myForm12″).validate({

submitHandler: function(form)
{
$(“#myForm12″).ajaxForm(form12);
}
});

}

oops … my code was incorrect, it’s

$(”#myForm12″).ajaxSubmit(form12);

not

$(”#myForm12″).ajaxForm(form12);

(form does work … but i need to click the submit button twice to get it to fire)

@Nick: Please give the this demo for an example of adding inputs to a form.

@Majid: Please try to put blockUI and ajaxSubmit into the submitHandler-callback of the validation plugin. That way its only called when the form is valid.

@Karan: I’ll readd that. I had a much more complex regex before, but that caused a few problems in Rhino. Just adding the + should be enough.

@Punky: Thanks for reporting that bug. Hadn’t noticed it until now.

@Roland: The latest revision is compatible with jQuery 1.2, I just haven’t got around to make a new release.
Thanks for reporting anyway. I’ll look into the onkeyup issue, that is definitely broken.

@Greg: Try to call ajaxSubmit inside the validation submitHandler.
Both ajaxForm and validate register a submit handler, you have to avoid using both.
See this example.

Jörn,

i’ll check that out. but i’m just calling …

$(”#myForm12″).ajaxSubmit(form12);

i’m **not** calling both ajaxSubmit and ajaxForm at the same time.

so the complete code looks like …

if ($(event.target).is(’.buttonName’)) {

var form12 = {
target: ‘.myDiv’,
url: ‘form-processor.php’,
type: ‘post’
};

$(”#myForm12″).validate({

submitHandler: function(form)
{
$(”#myForm12″).ajaxSubmit(form12);
}
});

}

I think it has something to do with the fact that i’m using load() to add the form the DOM.

Here’s the complete code … and thanks for your bassistance!

$(document).ready(function() {

$(‘body’).click(function(event) {

// #1 – load up the form. code to bring the form into the DOM

if ($(event.target).is(‘.partInfo’)) {

$(“#formContainer”).load(“form.php”);

}

// code to submit the form

if ($(event.target).is(‘.sendCoMailButton’)) { // my form button

var sendCoMail = {
target: ‘.result’,
url: ‘include/tab-message-sent.php’,
type: ‘post’
};

$(“#sendCoMailForm”).validate({
submitHandler: function(form)
{
$(form).ajaxSubmit(sendCoMail);
}
});

}

});

});

Jorn,

May I know when is your new release going to be ? Thanks .

Solution! Amen … I’ll be honest, I guess I still don’t fully understand how to bind, how to see if it’s bound or how to release it.

But here’s what made it work …

$(“#sendCoMailForm”).validate({
submitHandler: function(form) {
$(‘#sendCoMailForm’).unbind(‘submit’).find(‘:submit,input:image’).unbind(‘click’); //this is the magic fix, unbinding it.
$(form).ajaxSubmit(sendCoMail);
} });

Hi Jorn,

I am preparing a ColdFusion Custom Tag for easily using your plugin in CF markup.
I have a problem with IE and Opera.
Note: I am using validate.pack version 1.1, metadata.js and jquery 1.2

IE7:
MyCode is:

$(document).ready(function(){
$(“.cfjq_form1″).validate()
});

This code is working with JQ 1.1.4 but now simply block the submission but do not display the errors.
I obtain the same problem trying to place the errors in a separate box like this:

$(document).ready(function(){
$(“.cfjq_form2″).validate({
errorContainer: $(“.messageBox2″),
errorLabelContainer: $(“.messageBox2 ul”),
wrapper: “li”,
});
});

Opera works fine in the first example but fails in the second.
Firefox and Safari are working 100% fine.

Have uploaded a live example here:
http://www.andreacfm.com/examples/cfJq_forms/

Are these known issues??

Any suggestion?

Thanks

Andrea

Jorn,

Can you give me some guidance on how to fix that in IE so that I can temporarily use your plugin to be compatible with jQuery 1.2 ? The onkeyup and onblur is not as urgent. I tried to debug on why the error message not showing up in IE6, but no luck. Can you just send me the portion that fix this part ? Probably you can email me that portion of code with some instructions ? It’s quite urgent for me to fix that bug in IE6. Just send it to the email address that I’ve entered. Really appreciate it if you can help.

Many thanks.

Hi Jörn,

I continue to find your plugin to be a great time saver. I am using the errorContainer option to display a div on the form at validation indicating there are errors. However, when all of the validated elements should be passing their rules, the errorContainer is still visible. I would expect that it would hide. If I then click the submit button, it does hide. I wish to have it hide immediately after all rules pass without needing to click the submit button first. I prefer not to employ keyup or blur events in the form. Is there a way to accomplish this? Is their a validator method I must manually call to force it to hide?

Thanks for your time,
Mike

@Greg: If you have further problems, please post a test page. That’d make it a hell of a lot easier to see the actual problem.

@Roland: You need to replace the code that creates the error label. There is something like “<” + settings.errorElement + “>”. Just add a slash in front of the >, that should fix it.

@Andrea: Yes, that is a known issue. jQuery 1.1.4 changed a small bit that made code like this fail: $(“<label>”). You can get the latest revision from SVN where that issue is fixed.

@Mike: You’d have to overwrite the prepareElement method. Give this a try:

(function() {
  var prepareElement = jQuery.validator.prototype.prepareElement;
  jQuery.validator.prototype.prepareElement = function() {
    return prepareElement.apply(this, arguments).push( this.containers );
  });
});

See the Proxy Pattern explanation in the jQuery wiki.

Hello again. I am running into an issue where I cannot validate the inputs in a row that was cloned (using jQuery) from a hidden row. I have three inputs: length, width, and height. On the same form at the same time the validation for drop downs and text inputs work just fine. The just don’t work in the text inputs created with the clone tool. I have to do this so that I may add as many items as the user wants to the screen at any moment before the form is sent to the processing script.

I have tried it in IE and Firefox and it simply doesn’t work. I am using the attribute class=”{required:true}”. Any suggestions or is this something the validator cannot do right now?

Here is the javascript function that creates the new input fields:

blank = $(’tr.hiddenpallet’);
newitem = blank.clone().insertBefore(blank).removeClass(’hiddenpallet’);

This is wrapped in a ready function. I have tried the class with and without the first class name (ex. class=”len {required:true}” and class=”{required:true}”).

The curly braces surrounding the required:true seem to work the best for my site and they have worked on everything up until now.

Thanks,
Patrick

Hi! Am finding this plugin VERY useful! BUT … I don’t understand how to use the addMethod() – even the ones in additional-methods.js. This is how I am trying to do it …

$(“#testForm”).validate({
rules: {
name: {
lettersonly: true,
required: true,
minLength: 10,
maxLength: 30,
},

is this a correct way to implement it? (using lettersonly:true inside a rule) ?

I’ve been using the validation plugin to check all data in a form is all right. It works perfectly in Firefox and Opera, but IE (6) is making me go crazy.

In this browser, error messages don’t appear, although the form can not be submitted.

Here comes my HTML code:

Empresa
CIF
Nombre *
Apellidos *
Direccion *
Poblacion *
Provincia *
Álava
Codigo Postal *
Telefono contacto *
Movil
Email *
DNI *
Fecha de Nacimiento (dd/mm(aaa) *
Cuenta bancaria *

And here comes my JS:
$().ready(function() {
// validar el formulario de añadir cliente
$(“#cliente”).validate({
rules: {
cif: {
minLength: 9,
maxLength: 9
},
nombre: “required”,
apellidos: “required”,
direccion: “required”,
poblacion: “required”,
provincia: “required”,
cp: {
required: true,
digits: true
},
telf_contacto: {
required: true,
minLength: 9,
maxLength: 9,
digits: true
},
movil: {
minLength: 9,
maxLength: 9,
digits: true
},
email: {
required: true,
email: true
},
dni: {
required: true,
minLength: 9,
maxLength: 9
},
fecha_nacimiento: {
required: true,
date: true
},
cuenta: “required”
},
messages: {
cif: {
minLength: “El CIF debe tener una longitud de 9 dígitos”,
maxLength: “El CIF debe tener una longitud de 9 dígitos”
},
nombre: “Introduzca el nombre del cliente”,
apellidos: “Introduzca los apellidos del cliente”,
direccion: “Introduzca la dirección del cliente”,
poblacion: “Introduzca la población”,
provincia: “Introduzca la província”,
cp: {
required: “Introduzca el código postal”,
digits: “El código postal solo debe contener números”
},
telf_contacto: {
required: “Introduzca el teléfono del cliente”,
minLength: “La longitud del teléfono debe ser de 9 dígitos”,
maxLength: “La longitud del teléfono debe ser de 9 dígitos”,
digits: “EL teléfono solo debe contener números”
},
movil: {
minLength: “La longitud del número de móvil debe ser de 9 dígitos”,
maxLength: “La longitud del número de móvil debe ser de 9 dígitos”,
digits: “El número de movil debe contener solo números”
},
email: {
required: “Introduzca la dirección de correo electrónico del cliente”,
email: “Introduzca una dirección de correo electrónico válida”
},
dni: {
required: “Introduzca el DNI del cliente”,
minLength: “La longitud del DNI debe ser de 9 dígitos (formato 12345678a)”,
maxLength: “La longitud del DNI debe ser de 9 dígitos (formato 12345678a)”
},
fecha_nacimiento: {
required: “Introduzca la fecha de nacimiento del cliente”,
date: “Introduzca una fecha correcta”
},
cuenta: “Introduzca la cuenta bancaria del cliente”
}
});
});

The CSS relative to the errors is something like this:
#cliente label.error {
margin-left:400px;
width:auto;
display:inline;
}

In the HTML are also correctly included jquery-1.1.4.js, jquery.form.js, validate.js and jquery.metadata.js.

I cannot show how it seems since it is in a private application under user/password.

Does any body help me to see the light?

Thank you very much folks!

@Patrick: You need to refresh the validator each time you update the form that way. See the Dynamic inputs demo.

@Flemming: That looks good. But it works only if you added a method with the name “lettersonly”, and that is what addMethod is for.

@Guillem: That is an issue that crept in from 1.1.4 and is fixed in the latest revision of the plugin, but isn’t in an official release yet.

Jorn,

First off — thanks for this very useful module!

Now, I think that you may have a slight bug on the first demo page http://jquery.bassistance.de/validate/demo-test/index.html To reproduce this bug, first uncomment code block below line 79, for showing/hideing the last field of the second (green) table. In FF it works as expected. In IE it just changes the DOM, but it doesn’t refresh the last field of the form, until you click away from the checkbox control. I suspect that the problem may lie in the way .change handler for checkboxes (and radio buttons!) works in IE, because if you change the show/hide action to happen on .click, everything works as expected in both browsers.

Hi Jorn,

I’ve been using validator.refresh() everytime when I have a dynamic record being created. But when a page contains records of more than 100, your validator seems to hang in many of the browsers. Is there any other way of refreshing only the created form element to the validator instead of the entire validator ?

Your feedback is very much appreciated.

I think the resetForm() is not working with jQuery 1.2.*

I was doing everything properly so I just updated to the very latest (unofficial release) and my addMethod is working now! However, I just checked my form in IE6 and IE7 and it skips validation and gives me the following Error: Expected identifier, string or number (on line 59 apparently) – here’s a link if you wouldn’t mind taking a look: http://indstrengthdev.com/clientFiles/bayAgent/validation/testForm2.php

So, Jörn, where can I find the latest and unofficial version of the plugin? I just downloaded the one is here…:S

I also changed the jQuery version for the latest one released, I guess it’s the 1.2.1.

It’s still not working under IE (neither 6 nor 7)

What else can I do?

Thank you very much

@sloba: Thanks, fixed that!

@Roland: That is an interesting point, I haven’t considered that. I’ll try something that allows you to pass in the elements to refresh as an argument to the refresh method.
If you want to give it a try for yourself: Search for “refresh:”. Add an argument to the function. Add a check for the argument, and use that instead of the “big” selector in front of the filter-call. Let me know if you have any success, otherwise you’ll have to wait for my results.

Thanks for the hint about resetForm, I’ll give that also a try.

@Flemming: You have an illegal trailing comma in your code, in lines 59 , 73 and 85. Its easy to spot them using the Firefox extensions Firebug and Web Developer Toolbar. You need to enable strict warnings via the Dev Toolbar to see them on Firebugs console.

@Guillem: Try this.

@Roland: I’ve commited an improved refresh method. Please give a try. The related demo is also updated.

I’m really disappointed. Error messages don’t appear in ie6/ie7 with jquery>=1.1.4 With jquery 1.1.3 work fine.

Hey, Zukimo

Please refer to this post comments on “17. September 2007 |15:56″. Jorn actually teaches us how to fix that bug temporarily if you need this to be fixed urgently. Remember to get the un-packed version to modify. Hope this helps.

Cheers !

@Zukimo: That is also fixed in the latest revision.

I love the plugin and have used it on simple ul/li forms. However, I am trying to implement it in a table format (tr/td) where the field labels are only displayed in the initial TH and thus will not be displayed with each field. Ex:
First Name | Last Name | UID
George | Johnson | johnsong
David | David | anastasiud
Bob | Smith | smithb

I would implement row level validation, such as if first_name or last_name were entered on that row, then UID would be required. The field names on that row would be unique, such as first_name_15, last_name_15, uid_15, if 15 was the id of the record I was showing. Can someone please (PLEASE) help me out with an example that would do this? I would really appreciate it!

Thanks,
David

thx for the great plugin!

But the used cmxforms.js doesn’t work with jquery 1.2.1.
Any ideas?

Thanks
Klaus

Hi Jorn,

Can you help me to pack your validate.js ? I want it to shrink the size. I tried, but it was complaining the content doesn’t pass the ISO standard. That doesn’t allow me to compress using packer. I was suspecting that the charset that you use for Denmark date. As well as url method as follows :-

url: function(value, element) {
return this.optional(element) || /^(https?|ftp):\/\/[A-Z0-9](\.?[A-Z0-9ÄÜÖ][A-Z0-9_\-ÄÜÖ]*)*(\/([A-Z0-9ÄÜÖ][A-Z0-9_\-\.ÄÜÖ]*)?)*(\?([A-Z0-9ÄÜÖ][A-Z0-9_\-\.%\+=&ÄÜÖ]*)?)?$/i.test(value);
}

Btw, the partial validation is working now! as well as the onkeyup and onblur validation. Thank you so much. I am using jQuery 1.2, btw

Hi Jorn,

Can your validation onkeyup and onblur validation be turned on and off ?

@David: You can specify the dependency between fields using the required-method. Something like this:

required: function() { return $(“[@name=first_name_15]“).is(“:filled”) && $(“[@name=last_name_15]“).is(“:filled”) }

In that case it may be better to implement a custom method that searches for the fields in the DOM and checks their values:

$.validator.addMethod("uid", function(value, element) {
 return $(element).prev().prev().is(":blank") || $(element).prev().is(":blank") || value.length;
}, "UID is required when both first and last name are specified");

@Klaus: Thanks for the report, I’ll check that.

@Roland: Could you give the latest revision a try? I just fixed a missing semicolon and also commited update packed and minified versions.

Great to hear both partial validation and the onkeyup/blur stuff is working, mostly. To disable them specify onkeyup: false and onblur: false via plugin options.

Unfortunately I do not always know the position of the fields I am interacting with, as the table is dinamically generated and depends on user “view” (fields the users want to actually see and edit). Thus, there may or may not be other fields in beween first_name and last_name. Thus, I can’t use prev(). I am more interested in your required function above. Can that be abstracted to something like:
required: function(rowId) { return $(”[@name=first_name_" + rowId + "]”).is(”:filled”) && $(”[@name=last_name_" + rowId + "]”).is(”:filled”) }
?
Also, I was really hoping to pass these validation rules in the class, and the actual custom validation rules (if any), would be included as a js include. I am pretty new to JQuery as well and could still use some help with this.

I’ll play around with it as well. However, I tried just a simple require on a single field (not related to other fields) in a table and have not been able to get it to work. Could you by any chance send me a full example, maybe in email? Thanks a lot for your help!

I ran into difficulty using Validate with the latest release of JQuery 1.2.1. I’m looking into opening a bug in Trac for JQuery – on IE6 I can’t seem to dynamically create elements if I don’t close the tag: ie jQuery(“”) doesn’t work in IE6 (failing silently) but jQuery(“”) suceeds… (Both versions work in FF2)

This of course breaks the showLabel method in your Validate plugin… I don’t know if this is a bug in jQuery or if it will just be documented, but I wonder if you want to adjust Validate in the meantime…

Hi Jorn,

Thank you so much. I would like ask, what is the difference in between a full version and a minified version.

A follow up to my last post – see http://dev.jquery.com/ticket/1730 – I’ve found the problem and supplied a patch…

Hi Jorn –
I’m back.. and this time I don’t think I’ll be able to talk myself out of my own issues

I have built a very robust page using both your Accordion and Validation plugins, on my first attempt at using jQuery for a client site.
http://comparemyagent.com/forms/fa_sell.cfm

First of all, thank you for 2 great plugins…do you have a wishlist somewhere?
I’d like to give you at least a little something for your troubles.

Secondly – while things are mostly working, I still need some help, for which I am willing to pay you, or another user, to get some small things sorted out.
The problem is, I am supposed to have this done tomorrow and then make another 6 forms with similar functions for this site!

Here are a few more things I need to add to the base functionality:

1) Now that everything is working as it should for a single form, I need to break this into two ‘validation groups’ somehow. Perhaps an ID on each fieldset?

The idea is to have each of the next or submit buttons validate the fields in its panel. For example, at the bottom of the first panel is a button for ‘next’… if no errors, it should go to Panel 2 as it does now … but if there is an error, it should not go to next but should show the red error messages for the fields in the first panel. Once validation errors are fixed, that same button should allow going to the next panel.

2) I’d like a js alert box to be shown at the same time the validation is run, saying “Please correct the information as shown in red”, so the user sees very clearly why the next or submit button did not work. Then they can close the alert popup, fix the errors, and move forward.

Here are the errors I am struggling with, by browser:

// in IE 6

- once ‘submit’ is clicked, and validation shows, you cannot go back to the first panel

- validation response seems slow

- clicking submit a second time allows the form to be submitted, even if no validation errors are fixed

- my buttons have css to indent the text off of the page, showing only the background image – but for some reason they have an underscore or a dash (like a linked blank space?) … I have styled it to be white but it is still visible, need this to go away.

// in IE 7

- validation messages are in a tag, yet they are triggering the border from my css style for a ‘fieldset’. You will see a green border under most of the error messages (but not all of them)
This is very strange.

- same problem with not being able to go back after submitting / validating as IE6

- same underscore character in my buttons as in IE6

- same problem with being able to submit if submit is clicked twice as IE6

// in FireFox

- the accordion panel height seems to vary. Sometimes, on load, the bottom buttons are not visible, other times just fine.
What do I need to fix or change in my markup or css to make this work correctly? I have tried a number of things and can’t get it right.

// Safari

I do not have a mac. but I am being told that the page simply falls apart, no form visible on second panel, etc… any ideas?

As stated I am VERY WILLING TO PAY for someone’s time who can fix these things.
Anybody able, I’d be greatly appreciative… been on this for a long time now and I *must* get it all working, (and quickly, or I am in trouble) !

I am sure most of the trouble is of my own doing, but I am at the point where I can’t go any further without some help.

Thanks in advance… I’ll be checking back here regularly, and eagerly, throughout the day tomorrow.

Hi Jörn,

I cannot get onkeyup to work. I have the latest version of jQuery and your latest version of jQuery.validate from last night. Onblur and onsubmit both work fine, and both can be disabled. But onkeyup seems broken, in that no validation happens as I type in the form.

I have been away from our validation implementation for a few weeks, so I didn’t notice this before.

anyone can tell me what is the validation function for
domain name or ip address

Sorry Jörn — my mistake. Onkeyup works fine! Turns out I had forgotton all about our previous discussion concerning immediate validation. You mentioned implementing an option to switch on immediate onkeyup validation, which would default to being off. Has that been implemented?

Jorn,

I too have an interface where immediate blur validation is preferred. I have tried hacking the “require” function switch case without success. Do you have any recommendations for hacking this on my own?

Much Thanks,

Chris

I was able to get the table row validation to work. See example at http://www.rfcmultimedia.com/table.html

However, still having trouble with error placement. I need the error to be displayed underneath the input field, not to the right as it does now. It should also wrap around if the text is longer than the width of the input field. I am ok with adding another element inside the table cell ahead of time but the should not be there initially. It should only be added when an error is displayed and removed when the error is taken away.

I like having the text in the same cell as the input box because there will be a lot of cells and I want to make sure the user knows which cell has the problem. In the current example, however, the text in the input box changes styles as well. I’d rather only the error message have the custom text style (red, italics), and the input box have a dotted red line, but the text in the input box should remain unchanged.

Any help from anyone will be greatly appreciated. Thanks!

Hi Jörn,
I noticed a problem in Internet Explorer 7 when the Google Toolbar is installed. If you have the AutoFill feature enabled, it can conflict with error messages.

For example on your Tests and Examples page, with the AutoFill feature enabled to enter a name and e-mail address, the first two fields on the page are displayed in yellow to let you know you can use AutoFill.
If you leave them blank and click submit, the text that should be an error message reads: “Your Google Toolbar can fill this in for you. Select AutoFill”

I’m using the validate plug-in on a page with a custom errorPlacement handler and the only error message I get provided is the Google Toolbar message.

Any ideas? Thanks again.

Follow up to my previous post, it looks like Google Toolbar is modifying the element title in IE 7 but not Firefox. So the formatAndAdd function takes the Google Toolbar text instead of the validation error message.

Hi Jorn,

I have one big question for you. During the document ready you basically initialize the validator as

var myValidator = $(“#form”).validate();

…and at later stage, will be using this variable to validate again using

myValidator.form();

Can I avoid from calling $(“#form”).validate(); during the page load but register the form elements at the later stage by on-demand scenario. Meaning that, when user click “add” or “edit”, then only register those form elements to the validator for validation at later stage during form submission ? Instead of validating all of the field which might not be “dirty”ed by the user. Is this possible ?

If this can be done, it will definitely making the performance to be boosted. Please advise, thanks.

update: I think I found another IE bug… weirdest thing… I have my form in an accordion panel as you have seen, made of LI for each panel. And then, I have a group of form fields in a fieldset, all inside the LI. Not the smoothest markup perhaps, but it is working just fine.

Anyway, when using any inline element as the error element (label or span) and *when font-style:italic is applied via css for the error class*, IE7 puts the same top border style on each error label as is on my fieldsets. Totally whacked. To explain – I have a green border on the fieldset. When hitting submit in IE7, each of the labels appears to the right of the error field as it should, but with a green top border all the way across the page, with a gap where the ‘legend’ appeared in the true top fieldset border.

I was so stumped on this, I narrowed it down by gradually removing css styles – setting border-top:none on my fieldset kept the border from appearing on the labels, so this is how I knew what was getting mirrored. And then I narrowed it down to the italic font style. What the…??? I know… but its true. Taking italics off of the text style for the error labels made it so it didnt happen any longer.

(note – I have a top dotted border on my error label styles now as per client request.. this is not the same – the problem border was all the way across the page, right through whatever field happened to be there, obviously a display error … and very very strange! and more proof to me that IE7 is just a bucket full of problems)

nothing for you to do about this, just a really strange phenomenon I managed to uncover (i think I am a browser bug magnet!)

Update on long error post above (thanks for your patience the last few days with all my insanity!)

I have managed to solve everything except

a) In IE 6 and 7, clicking submit button one time shows errors. clicking it a second time allows the form to be submitted with no errors being fixed. is this a bug?

b) still need to sort out the correct code, if possible, for validating part of the form when a button element is clicked, and interacting with accordion so that on click, validation is run – if valid, next panel is shown, if not, showing errors and keeping accordion from advancing.
Is this possible?

that’s it… everything else I was whining about seems a-ok at this point.

Wanted to drop by and give thanks for your awesome jQuery plugin Jorn.

I also wanted to throw in a little note: the plugin wasn’t working for me with IE6 and IE7 – took me four hours to figure it out but the problem was not the plugin; it was in my ‘addevent.validate.js’ file (which I added rules to). I had a ‘comma’ trailing the last rule in the file and was tripping up both IE’s. Fix is obviously to remove it because no other rules are following it!

Hope that helps any noobs (like me).

Hi,

I am using this plugin along with jquery form plugin. I am using the error container, but i don’t want it to validate the form on any event other than submit.
I have tried putting in event: “submit” and onsubmit: true – but nothing seems to work? It still validates when i loose focus to a textfield?

Any help appreciated, below is the code. Ta.

–
var container = $(‘div.msgError’);
var v = jQuery(“#”+formId).validate({
onsubmit: true,
event: “submit”,
errorContainer: container,
submitHandler: function(form) {
jQuery(form).ajaxSubmit({
success: function(result) {
if(result.status)
{
v.showErrors(result.data);
v.focusInvalid();
}
else
{
$(‘#ajax_response’).html(result);
$(‘#ajax_response’).show();
}
}
});
}
});
–

I got error with jQuery 1.2.1:

Error： jQuery(element).data is not a function
Source：http://localhost:4321/content/js/plugin/jquery.validate.js
Line：895

This occurs in both FireFox 2.0 and IE 6.0.

The markup:

Your Email
You may get replied through this email address.
Title
Subject of your message.
Message
Words you’d like to say.

The script:
$(document).ready(function() {
$(‘#email’).focus();
$(‘#contactForm’).validate();
});

@David: Yes, you can abstract that as a factory method, and call it like this:

required: createRequiredFor(rowId)

createRequiredFor must then be a function that returns a function:

function createRequiredFor(rowId) {
return function() {
$(”[@name=first_name_” + rowId + “]”).is(”:filled”) && $(”[@name=last_name_” + rowId + “]”).is(”:filled”)
}
}

See the Dynamic Totals demo for reference to validation with table layouts. Though currently that demo is still a bit buggy.

The issues you describe with error classes should be solvable by tuning your stylesheets. The rest just needs a good errorPlacement implementation. I’d need to see a test page to provide more concrete help for that.

@metapundit: Thanks for the report. The issue is fixed in the latest revision.

@Roland: The minified version removes all comments and whitespace.

@Ermath: Nope, the immediate option isn’t there yet, but will be included in 1.2.

@raghav: You could start with the url-method for domains, though there isn’t any for IPs yet. But finding a regex for IPs should be easy, with that you just need to copy on the of the existing methods and replace the regex.

@Jose: You can avoid that issue by providing an error message for that field that has a higher priority then the title attribute. The plugin checks custom messages, specified via the messages-option, first, then the title, then default messages.
I don’t want to completely remove the title-support, but I also don’t see any other solution. Ideas?

@Roland: The latest revision allows you to pass elements to the refresh-method, and only refresh those. Thats great for adding new elements, though it doesn’t avoid validating all elements.

@ben: You need to specify onkeyup:false, onblur:false and onclick:false to disable any validation other then submit.

@deerchao: Looks like you haven’t included the metadata plugin. See the dependencies section on this page for details.

Thanks for all your help so far. Please see my test implementation at:
http://www.rfcmultimedia.com/table.html

I still need help with the error placement. I’ve been playing with CSS but no luck. I need the error to be displayed underneath the input field, not to the right as it does now. It should also wrap around if the text is longer than the width of the input field. I am ok with adding another element inside the table cell ahead of time but the should not be there initially. It should only be added when an error is displayed and removed when the error is taken away.

I like having the text in the same cell as the input box because there will be a lot of cells and I want to make sure the user knows which cell has the problem. In the current example, however, the text in the input box changes styles as well. I’d rather only the error message have the custom text style (red, italics), and the input box have a dotted red line, but the text in the input box should remain unchanged.

Hi Jorn,

Thanks for your reply. But my question was how can I NOT to validate ALL of them. I just want to validate a portion of it. I believe when the page load, you have already register those form elements that exists in the form, am I not right ? So when click submit, you will basically validate the ENTIRE form. I would rather validate only those which are “dirty” (entered by user, or edited by user – on demand basis) to be validated. Is that possible ?

If yes, how should I initialize the validator ? Currently how you initialize is by using var myValidator = $(”#form”).validate();

Please advise

Yes, I know that you can add the new form elements by calling refresh(partial); But before that, how should I initialize the validator ?

p/s : sorry for those capitalize word, I just want to emphasize my “problem” to you :p

Hello everyone,

It doesn’t seem possible to display an error message under a select tag.

e.g. a list where user can choose his religion, the first item is “Select” because I want to be sure he selects an item :
[...]
religion: {
required: function() {
return $(“#religion”).val() == ‘Select’;
}
},
[...]
religion: {
required: “religion required.”
},
[...]

Religion (visible)

Select
Christianity
Orthodoxy
Muslim
Buddhism
Judaism
Atheism

[...]

I can see by displaying an alert that it enters the required custom function, but no error message is displayed.

Thank you for any kind help !!

Hi and thanks for the terrific script! I’ve tried quite a few out over the past week and yours is the only one that gets me really really close to what I need to have happen with my form.

I have posted a working version of one of your demo scripts here (http://issuelab.newmediastage.org/system/application/scripts/js/jquery/demo-test/ajaxSubmit-intergration-demo.html) . All I’ve done is add a comment textarea that uses tinyMCE. (By the way, your script is the only one that even let’s me see the wysiwyg buttons on the textarea – thank you!) I’m running into what I’m learning is a very common problem — you have to click submit twice to get any validation info on the comment field. I understand this is because tinyMCE tucks textarea input into a hidden field until it needs to do something with it. And that the validation script doesn’t know it’s there until it’s been moved into view, so to speak – that’s what happens on the first click. The second click actually triggers the validating.

The fix that I keep seeing all over the web is to add tinyMCE:triggerSave(); somewhere — but where? I did se your posts at http://groups.google.com/group/jquery-en/browse_frm/thread/f649148d8ff5511a pertaining to this issue, but I haven’t been able to find the actual fix for tinyMCE implmentations.

I am really new to all things asynchronous JS. Not new to tinyMCE or PHP though. I appreciate any pointers, clues, hints, script rewrites! Thanks!

Hi Jörn,
Thanks for the reply. I know for custom validation rules, the correct message is used, but for the standard rules, such as “required”, the element.title is checked before the validator messages. Maybe, the element.title should be checked last, before the “no message” warning?

From the formatAndAdd function:
var message =
this.message(element.name, rule.method)
|| element.title
|| jQuery.validator.messages[rule.method]
|| “Warning: No message defined for ” + element.name + ““;

Hi Jörn.

i have found a serius flaw in your validator.

I see that in you use Jquery 1.1.2 in http://jquery.bassistance.de/validate/demo-test/

But if you use the latest JQuery (1.2.1), Internet Explorer will not show the error labels.

I guess i have to use JQuery 1.1.2 until you know what the problem is.

I found a fix for IE not showing the error labels with jQuery 1.2

on line 739 change,
label = jQuery(“<” + this.settings.errorElement + “>”)
to:
label = jQuery(“<” + this.settings.errorElement + “/>”)

The ending slash allows it to parse the element correctly. Not sure why it’s needed, but it is.

If the commenting system screws up on that code change, just add a / to the end of the generated HTML element on line 739.

Hi,

using regulary validation plugin.
My problem is allow a field to contain only 8 carachter (only letters
or numbers) but no white space.

I am really bad with regex.

Any Help??

Thanks

Andrea

Thanks Jorn, works great.

Hi Jörn,

cool script, thanks. There is just one thing with the blur event I don’t
get. I checked out the demo http://jquery.bassistance.de/validate/demo-test/custom-methods-demo.html
but didn’t see, how to implement you code snippet from above.

Where do I have to put it that the error messages appear also on
an blur event?

Thanks indeed
Florian

Ok, forget it. I got it now.

I used another validation script before. There the blur validation was
working in a different way. When you clicked into a required input field,
entered something wrong or nothing and left it, the onblur event was firing an error message at once.

Hi Jorn,

your plug-in is really great ! I’ve just a question:

is it possible to concatenate more than one check for a property ?

An example:

required: “#multiuser:unchecked” AND “#otherfield:filled”

If yes, is it possible to use the AND and the OR logic both ?

Thanks

Great plugin! The only question I have is, I don’t understand how to submit the form after it’s been validated. My php code is on the same page as my form. I see where to edit the submit handler and change it from alert to whatever but, I don’t understand what to change it to.

Are there any known issues using the validation plugin with IE? I’m getting an error “Object doesn’t support this property or method”. that happens just when loading the form.validate() function.

@Matthew: Could you post a test page for that?

@tinawina: I’m planning to add a beforeValidation callback that allows you to clean up stuff like tinymce before the actual validation is done. Until it is released you can put that yourself in the jQuery.validator.prototype.form method, just at the start call this.settings.beforeValidation().

@Jose: I guess that would work. It makes titles utterly useless for the default methods, but considering the problems, that should be acceptable.

@Hanif: The problem is pretty clear and was caused by a change in jQuery 1.1.4. It doesn’t accept invalid XHTML anymore (in IE). As Chris points out, the fix is to add a closing slash to the error label creation. That fix is already included in the latest revision.

@Rider: jQuery’s expression supports OR using commas, eg. “#required:checked,#optional:checked” returns “true” if either #required or #optional is checked. Having an AND would help a ton in this scenario, though currently there is no way to define that. I’ll keep that in mind. Either I’ll add a custom expression to the validation plugin or maybe we can add something to jQuery itself. Until then you have to fall back to a function that implements the AND logic.

@John: Do you need an AJAX submit or just a plain submit with validation? In the latter case: Don’t specify a submitHandler at all.

@Marvin: Yes. Please give the latest revision a try.

First I want to thank you for the awesome plugin Jorn.
I am posting here because I am dynamically creating rows of inputs. I can create them just fine and even create rules for them and then validate them and it works great. However I have also created a button to remove them one at a time and when I do it will not let me continue to the next page. This is obviously because the rule still exists, so I tried nulling those indexes in the array, no luck. I have tried iterating through the array, copying the indexes and their data to a temporary array while excluding the ones I don’t want to keep and then setting the rules array equal to that temp array and still no luck.

I was hoping you would have some suggestions as to how I can remove the dynamically created rules of the last cloned object and still be able to validate what is left of the entire form.

Thanks,
Patrick

More on my previous posting…

I would like to add that I have tried using delete to remove the object property (I know, I know, before I was treating like an array but now I am treating it like an object. I am new to javascript). The delete command successfully removes it from the rules object, but the form will not submit successfully.

If I add the new rows of inputs but don’t remove any and fill it out correctly then it lets me send the form. This part is a real head scratcher. Thanks for the help!

Thanks,
Patrick

Just tried the latest revision to try to fix the IE issue above but still no luck. I tried the revision dated 2007-09-25. I still get the same error: “Object doesn’t support this property or method”. Is there something else I can try and do you know the specific reason it gets this message?

Thanks,
Marvin

I want to apologize. I made a bonehead mistake and forgot to refresh the validator after removing the rules. That fixed it. Sorry and thanks for the great plugin.

-Patrick

Hi Jörn,
Please see my post from 29. September 2007 |15:51. Any ideas of what I could do?

Hi Jorn,

I discovered a very weird bug in IE. When you add a new dynamic field in your form in IE, it will validate for the first new dynamic field. Then after that when you add a few more child, it wont validate properly for the newly created fields after the first one being validated. It happens even in your demo. Can you take a look at it ? It’s quite urgent, as most of my clients are using IE browser.

Thanks

Please ignore my previous post. It’s jQuery’s incompatibility issue.

Hi Jörn,
I discoverd that the newest release from you doesn’t work. i used latest metadata rev 3554 and the latest validate plugin rev 3607.
Firebug says jQuery(element).metadata is not a function in line 895 of the validation plugin.

Thanks for the great work of yours!

Hi all,

I have rules defined like

rules: {
postcode: {
ukpostcode:true,
zipcode:false
}
}

using custom methods; but both of them try to validate. What could be wrong? (in fact I have functions that return booleans).

Thanks

Now I’m getting the error “$.meta has no properties” when it encounters the line “$.meta.setType(“attr”, “validate”);”. any ideas why this is happening?

Ok, hopefully todays post won’t be another mistake on my part. I am trying to display the errors in a custom container and everything is working almost perfectly. Except I have notice that when it builds the list of errors to print to the screen, it brings the container into view (good), it lists the number of errors (fantastic), but then next to each listing number the actual error messages are hidden from view.

The messages are getting a style = display:none; attribute from the defaultShowErrors() function. Even weirder is the fact that if you click anywhere on the page at that point it brings only the first error into view. Multiple clicks to nothing else. Also above my error list I used your example to print the number of errors. Before the click I see the correct number of errors (lets say 8) then after the click it says only 1 error has been found.

Now I can brute force the rest of the messages to display by doing a search in that container for all elements with the tag and then change the attribute style to display: inline. However they still don’t show up until that extra click event happens. So for my users to see the errors they have to click submit, see the error container, then click again anywhere on the screen.

I looked through your plugin and I don’t see why it is creating and waiting for a click event before completing processing during validation. I am probably missing something so I am not going to jump to any conclusions. Any suggestions? Thank you for your time!

Sincerely,
Patrick T

Ok I figured out the $.meta error I was getting. In the newest version in the repository, it requires the use of $.metdata instead. That worked.

To fix my problem with IE – more specifically IE 6, I needed to use the jquery.validate.min.js file. When I used the jquery.validate.pck.js or jquery.validate.js file, it gave me the “Object doesn’t support this property or method”. That error was gone when I siwtched to the “min” file. So you might want to check out why there’s taht discrepancy. Otherwise, IE 7 and Firefox work with the other files.

@Marvin: Looks like you didn’t include the metadata plugin. Its linked above in the Dependencies section.

@David: You can use the errorPlacement-option for the positioning. See the custom methods demo for an example.

By defining appropiate CSS rules you can prevent that the input is “marked”, eg. limit any .error rules to labels: label.error { color: red; …}.

@Alex: Paul McLanhan has a new metadata plugin in the works, and I’m already using that in the latest validation plugin version. Give the one in the validate-folder a try.
Though currently it looks like the viewer von dev.jquery.com is out-of-sync. I’ve uploaded the latest revision until that is resolved.

@Roland: Can you explain what the exact problem was?

@Stan: The plugin uses regular JavaScript objects to define rules, but in most cases, the only the key is necessary, not the value. In other words, it doesn’t matter if you specify true or false, as long as the key (the rule) is present, it gets validated.

@Pjerky: Could you post a test page for that issue? That would help a lot debugging the problem.

Here’s a quick function that will verify that fields match (password fields, etc)

jQuery.validator.addMethod(“matches”, function(value, element, param) {
if($(‘#’ + param).val() != $(element).val())
return false;
return true;
}, “Please ensure that your verification fields match.”);

To use this, in your rules, just have something like:
‘passwordVerify’: { matches: ‘password’ }

Thanks Jörn but that’s what I was affraid of. Is there a way to do otherwise as with ‘required’ method from your example at the top of this page:

required: function() {
return $(“#age”).val()

Hi Jörn,

the errors stopped with the latest jquery (subversion) and your latest jquery.validation.js and the latest jquery.metadata.js. however if the jquery.validation.min or pack is used it still fires up the error that metadata is no funktion.
thx for your help.

Ok, since the file is large I have posted a stripped down html sample on my subdomain. It has everything needed to run the form the way I designed it.

The link is: http://pt-stable.ttishipdirect.com/spotquote_sample.html

Thanks for your time,
Patrick

Many thanks !

the OR logic, with commas, works well …

Hi Jörn,

I moved the logic to the added method and more or less happy (the only drawback I can’t have a separate error message for previously two different regexp metheds.

Found something else from example:
$(“#myform”).validate({
errorContainer: $(“#messageBox1, #messageBox2″),
errorLabelContainer: $(“#messageBox1 ul”),
wrapper: “li”,
});

when an error is highlighted and fixed, the error message disappeares but the heading The are errors in your form! stays! Do you know why and how can I fix it?

Thank you,
Stan

@Chris: Thanks, but that is nearly identical to the default equalsTo method. It accepts a jQuery selector though, giving you a bit more flexibility.

@Stan: I experimented with hiding the complete error container when validating a single element – instead of only on submit, as it is currently implemented. It was rather annoying, because the container tended to keep flashing on a single keypress.
In case you want to give a try: Replacing the call to this.prepareElement() with this.prepareForm() in the element-method should be enough.

@Alex: Thanks for the report. I should’ve updated those. Currently I’m having difficulties with the build script, something is broken there. Until I figure that out, you could just use Dean Edward’s packer directly.

I have a bit of a strange one: I have a table that consists of input fields, and I have a button to create a new row by cloning the bottom row of the table. The row that’s cloned has columns that look like:

but it appears that the metadata is not read because those new rows don’t get validated. and since the id of the new fields gets incremented everytime a new row is created, i’m not sure how to specify that these new rows need to be validated.

Any ideas on how to deal with this?

I noticed Dean mentioned the two submit button issue and the answer was to give the Cancel submit a class=”cancel”. I’ve done that and it still doesn’t work. Removing the Cancel button all together makes everything work. Is there something else I may be missing?

Hi,

Jorn: Exist a way to display the errors inline and in a separate box together ( for the same validation event) ??

I tried but did not get it.

So a tried a workaround:

$(document).ready(function(){
$(‘#something’).validate({
errorElement:’p',
errorClass:’errorField’,
errorPlacement: function(error, element) {
var isclass = element.attr(‘id’);
error.insertBefore( element.prev());
element.parent().addClass(‘error’);
var link = ‘‘ + error.text() + ‘‘;
$(‘#errorMsg ol’).append(link);
},
success: function(label){
label.parent().removeClass(‘error’);
}
});
});

The idea is to catch from success the the label.text(), compare with the element in the #errorMsg box where have been previusly added and hide the matched one.
My preoblem is the label argument passed by success…
label.text() do not retrn nothing and I even cannot add or remove classes.

How get the text from ‘label’….maybe I do not get what is label. Should be the jQuery element creaeted to display the error on validation….or am I wrong???

Thanks

Andrea

Hi,

I noted that using the errorPlacement when I insert text in a required field after that the validation has failed the event run for every carachter I write and the (now) empty error element is continuosly inserted in the dom.
Is that normal???

Code is this:

$(‘#something’).validate({
errorElement:’p',
errorClass:’errorField’,
errorPlacement: function(error, element) {
error.insertBefore( element.prev());
element.parent().addClass(‘error’);
},
success: function(label){
label.removeClass(‘errorField’);
label.parent().removeClass(‘error’);
}
});
Thanks

Andrea

@Joe: You need to call the validator’s refresh() method after adding new inputs. The latest revision allows you to pass those new elements directly to the refresh()-method, allowing you to refresh only new elements.

@Gregg: Can you post a test page?

@Andrea: I’m not quite sure what you are trying to achieve. A test page could help a lot.

I am trying to display errors in a custom container, however I have notice that when it builds the list of errors to print to the screen, it brings the container into view, then it lists the number of errors, but then next to each listing number the actual error messages are hidden from view.

The messages are getting a style = display:none; attribute from the defaultShowErrors() function. Even weirder is the fact that if you click anywhere on the page at that point it brings only the first error into view. Multiple clicks do nothing else. Also above my error list I used your example to print the number of errors. Before the click I see the correct number of errors (lets say then after the click it says only 1 error has been found.

Now I can brute force the rest of the messages to display by doing a search in that container for all elements with the tag and then change the attribute style to display: inline. However they still don’t show up until that extra click event happens. So for my users to see the errors they have to click submit, see the error container, then click again anywhere on the screen.

I looked through your plugin and I don’t see why it is creating and waiting for a click event before completing processing during validation. I am probably missing something so I am not going to jump to any conclusions. Any suggestions? Thank you for your time!

Here is the validator settings part of the script, maybe I need to add or modify a setting?…

var container = $(‘div.container’);
var elist = $(‘span.errorList’);

var validator = $(“#request_spotquote”).validate(
{
showErrors: function(errors, errorList)
{
container.find(‘span.errorHeader’).html(“Your form contains the following errors, see details below. (Click on the error message to go to the problem field):”);
validator.defaultShowErrors();
},
errorPlacement: function(error, element)
{
error.appendTo(elist.attr(“style”, “display: inline;”));
},
rules: rules,
messages: messages,
errorContainer: container,
errorLabelContainer: $(“ol”, container),
wrapper: ‘li’
});

The link to the full test page is: http://pt-stable.ttishipdirect.com/spotquote_sample.html

Sincerely,
Patrick

About the problems with displaying the labels in IE (which you have fixed i see now, spent hours on that one..)..

It can be solved be adding a / before the close >
So:
label = jQuery(“<label/>”)

Which is shorter than your current fix.

As for my previous message. If I can just find a way to skip over the click event that seems to occur and have it finish processing the validation functions I can brute force the labels to show immediately.

That is all I am really looking for is a way to prevent the javascript from waiting until the user clicks on the screen to finish running (and thus running my reveal method).

Is there a way to put 2 error messages in title attribute.

For example I have email input field having two rules(required and email). I would like to provide error message for both cases.

Sorry if this is something I should know, I’m just starting with jQuery and have no general JavaScript knowledge.

Regards.

Ok, so I have to apologize profusely for wasting your time. I found that I was re-declaring the validator for this form, but without the needed parameters and that was causing a conflict of sorts while processing the script.

I am very sorry and I will try to be more careful next time. Thank you for your patience and assistance.

@Pjerky: The link is broken, could you fix that?

@Michiel: Thanks, gonna improve that.

I took it down now that I solved the issue. However I can put it back up if you would like to look at it for reference. I am using dynamically added fields, rules, and messages along with containers and autocalculating values. So it might make a good example.

I’ve spent hours on a problem that was already mentioned here by Hagen Dias – a perfectly valid code was working in IE but not in FF and Opera. Validation simply did not happen.
As it figured the problemm was that i had the FORM tag outside the TD tags. As soon as i moved the FORM inside the table cell everything worked perfectly.

Jorn, thanks for your work

@Pjerky: That shure sounds interesting

@Taranen: Good to hear you got it solved. Lets hope others with the same problem find your comment here. Maybe I’ll add a FAQ somewhere…

Does someone solve the problems with Google toolbars which replace error message ? /See Jose comments/

Hi all,

is possible to use submit event in a single field validation method?

With “addMethod” i add the clause “unique”.

Now i use the validation method only with the blur event on a single field
eg.

$(“#myform”).validate({
//validate rules for all field without “inputname”
});

$(“inputname”).validate({
event: blur, onkeyup:false, rules:{‘inputname’:{unique:true}}
});

This do the validation of all form on the keyup and submit, but for the field “inputname” do only whet it lost focus.

What i would do is validate “inputname” on the form submit too, but not on the keyup (validation via ajax is slow).

Is possible?

Tnx

Hi,

Two, hopefully, simple questions:

1) Is there a crafty way to just replace the current label’s text with the error text? I managed to replace the text but can’t figure out how to get the text back to the original label on success!

2) I’m wondering the same thing Blaž asked about a few comments up. Can multiple error messages be set up for the same validated input? For instance, I have a password box. It has to be at least x characters, it has to exist and it has to have one uppercase later. Can a message be generated for each bit of failed validation?

Thanks all! and Jörn, thanks for creating/maintaining/sharing this plugin.

@Miro: Your best bet is to specify error messages for each element, instead of using the title attribute or default messages.

@Gabriele: You could use the ignore option to specify elements to ignore, and apply the validation method two times. Once for all other elements, setting ignore to ignore “inputname”, once without those and anly “inputname”.

The option “event” doesn’t exist anymore. Please see the new API documentation for a more complete documentation, though subformRequired isn’t available in 1.1.1 yet.

@Will: Could you show me what you’ve got so far?

So far there is no way to display multiple messages at once for a single field.

Hi Jörn,

I actually reverted to another method because replacing the label text was causing a usability problem. Even with the error saying something like “Please enter a password of at least 6 characters”, without the label actually saying “Password” the text box felt a little lost. The tech part turned out not the be that bad, I just had to set a flag. Stuff current label into a var, set the flag, replace the label text with the error text. Then, on success, if the flag had been set, set it back to the var. It was messy but it worked. But like I said, it’s not very wonderful for usability.

Thank you!

Will

I am trying to test for a UK postcode if a checkbox is checked elsewhere on the site but this is failing with the following script.

Can anybody suggest how I should be doing this?

Thanks

jQuery.validator.addMethod(“ukpostcode”, function(value) {
value = jQuery.trim(value);
return value.match(/^[A-Za-z]{1,2}[0-9A-Za-z]{1,2}[ ]?[0-9]{0,1}[A-Za-z]{2}$/);
}, “Postcode – please enter a valid UK postcode”);

$().ready(function() {

$(“#my_details”).validate({
rules : {
“delivery_postcode” : {ukpostcode: “#delivery_matches_billing:unchecked”}
}
});

});

Ok!

The script is fully complete and functional!!

I currently use it! I found that when I use the Validation in Mode Error Messages and I try to validate equal fields I cannot because cannot submit form.

What can I to try to validate 2 fields with same value?

Hello !

I have a set of forms to allow massive articles registration in DB.
The idea was to have one single button which will, when clicked, send ajax requests of all the forms filled in.
The forms in the page have id’s from “form_register1″ to “form_register20″.

$(‘#submitButton’).click(function() {
$(“[@id^=form_register]“).submit();
});

This is the way I bind the validate function :

$(“[@id^=form_register]“).validate({
submitHandler: function(form) {
alert($(form).attr(‘id’));
[...]

But it will only try to send form_register1 (20 times) (it show form_register1 20 times in the alert above).

Even if I replace “$(“[@id^=form_register]“).submit();” by “$(‘#form_register2′).submit();” it will show me form_register1 !
Why ?!

Can anyone help me with this ?
Thank you!

Tooltips broken? Just started using this plugin and was browsing through the API. I tried out the tooltip but get an error using the basic example:

Firebug says: $(“input”).tooltip is not a function???

Thanks for the great plugin!

Nevermind – I found your tooltip plugin page and noticed it requires the dimensions plugin. Might want to make a note here – or in the API docs?

I have put the test page back up.
It has drop downs that were created at runtime by the server with validation rules and messages for each that were not included in the script header. It has dynamically created and removable input fields with rules and messages for each. It uses message containers and an automatic value calculator. And buttons that appear and disappear under certain conditions. So it could be a useful sample.

It can be found at: http://pt-stable.ttishipdirect.com/spotquote_sample.html

I hope people find this helpful.

Enjoy,
Pjerky

Hi Jörn,

What a great set of plugins! Really big thanks for the hard work – they’re making working with JS a real pleasure again

I had a question regarding the placement of the errorContainer – is it possible to specify different containers for a group of input elements? Say input1, input2 and input3 all have one container, and inputs4 and input 5 use a different one? I guess I could do it by using a cutom method to set the errorContainer, but I wondered if there was a way to do it natively?

I suppose an override in the rules would do it (I tried but it broke!)

//default container
errorContainer: $(“#messageBox1″),
rules: {
“input1″: {
//overridden container for this element
errorContainer: $(“#messageBox2″),
required: true,
minLength: 2
},

Thanks for any tips you might have.

hi

if you check this page in FF the validation works :
http://sc.cmsdude.com/index.php?option=com_profile&task=signup&Itemid=3

but in IE it does not – anyone know whats wrong ?

Tnx
Sean

You should fix the addWrapper
Was again totally flabbergasted what happend now. When i had an error and then fixed it, my whole page disappeared.
This was due to using div as wrapper, and your addwrapper wanted to hide all parents of the error who were divs..

addWrapper: function(toToggle) {
if ( this.settings.wrapper )
toToggle.push( toToggle.parents( this.settings.wrapper ) );
return toToggle;
},

Should be

addWrapper: function(toToggle) {
if ( this.settings.wrapper )
toToggle.push( toToggle.parent() );
return toToggle;
},

And as a suggestion, this is how i have equalto. I have added a few lines that makes sure that if the edit the counterpart of the equalto, a check is performed. So when people fix their mistak they dont see a false error.

equalTo: function(value, element, param) {
comparand = jQuery(param).unbind();
validator = this;

this.settings.onblur && comparand.blur( function() {
validator.settings.onblur.call( validator, element );
});
this.settings.onkeyup && comparand.keyup(function() {
validator.settings.onkeyup.call( validator, element );
});

return value == comparand.val();
}

@Will: Okay, good to know anyway.

@Russ: You need to specify the dependency for the required rule, and then add your uk-method to that. Something like {required:”dependency:unchecked”,ukpostcode:true}.

@Jose: Sorry, I don’t get your question. Could you please clarify it?

@Matthew: The validation plugin supports only one form at a time. In that case you have to manually iterate over your forms and call validate for each of them. That still quite easy using each().

@Pjerky: Thanks for the link.

@Dave: In that case you may need to use your own showErrors-implementation instead of the errorContainer option. If you’d provide an example implementation, I may add it to the plugin.

@Sean: You should start looking for any trailing commas. You can turn on strict warnings in Firefox to help you with that.

@Michiel: Thanks for the comment. I’ll definitely apply your patch for addWrapper. I’ll also give your equalTo patch a try. Those events need some more work anyway.

Hi.

Is there a way to check a select box on change? I’m using ‘keyup’ for the rest of my form. It seems like the select doesn’t get checked until a new item is clicked.

I tried searching through this page and saw something close but it didn’t quite work.

Thanks for any insight.

Hi Jörn!
Your validation plugin is so much useful for me. I love it!
Theres one little thingy: when checking checkbox-groups: the script checks for the unique name-tag to build a checkableGroup.
Could it be possible to group a checkableGroup just with an unique id-tag ? i tried that on my own with no success.
Thanks for the great work you do !
Alex

Jörn,

with all of these @Dave … and @Sean… you have to do, I think it’s time you hacked up an Inline Comment Reply plugin.

Will

Hi Jorn.
I have a form which uses your Form Validation plugin. Ocurring an error I’ll want to display that label field in another color. What do you suggest? Thanks.

Hi

I can’t make the script (at least versions from 18/Oct/07 until now) to work on (as in “load correctly without errors”) IE6. It complains about the regular expression used in the URL validation function not being valid, unless I remove those ÜÖÄ that are around.

Apart from that, great script
thanks a lot

@Will: Thanks for brining this up. Currently the support for selects is far for perfect. Until I’ve fixed that, you can add the interesting events yourself and use the element() method of the validator object that is return by the validate plugin method. Something like this:

var validator = $("#myform").validate();
$("#myselect").change(function() {
  validator.element(this);
});

About the comment system: There is a lot of stuff that I’d like to improve on this site. And eventually the comment system as a discussion board for the plugins will be replaced by a forum.

@Alex: You mean the grouping via the name-attribute, right? You can’t do that via the id-attribute, because the id-attribute must be unique.
If you could give me a bit more context, like, what your actual problem is, I may be able to provide more help.

@Marco: You could use the showErrors-option for that, and delegating to the default inside your implementation. Something like this:

$(".selector").validate({
   showErrors: function(errorMap, errorList) {
		$.each(errorList, function(i, error) {
                  $(error).prev("label").addClass("error");
                });
		this.defaultShowErrors();
	}
 })

Its a bit ugly because it won’t remove that class when the field is valid. I plan to add a lot of custom events that you can use to implement stuff like that without hacking the plugin.

This isn’t working in IE 6 – “Object doesn’t support this property or method” on the validate() function. I’ve tried using the jquery.validate.min.js file as suggested above, but this didn’t fix the issue. I’m using jquery 1.2.1.

Any ideas on how to fix this? I need a form validating quite urgently.

Thanks,
Nick

Hi Jorn

what you mean by ‘trailing commas’ – do you mean in the html ?

tnx
sean

Hello,

I am using remote for validation. Is it possible to receive and output a dynamic remote error-message from my .php instead of a static error that is specified in my .js?

Thanks,
-Nox

@Nick: Did you download the 1.1.1 release? Anyway, the best way to get help is to post a testpage that show the problem.

@Sean: In your Javascript code.

@Nox: No, not yet. I still need to figure out a way to support that while keeping the API simple to use.

Jorn,

I’m looking for another example using ajaxSubmit integration. Your example(http://jquery.bassistance.de/validate/demo-test/ajaxSubmit-intergration-demo.html) looks like uses ajaxSubmit but I don’t know nothing related to ajax because that fields are submited to an action page. That’s right? One good example could be:

- validate all fields;
- submit with ajaxSubmit;
- hide original field and display a server side message.

What do you think about?

Thank you for your time and support us!

Hi Jörn,
maybe you can help me:
I’ve a form with error and success messages.
I’ve an optional field “email” in my form with your rule “email” and if the user removes the value of this field after there was one, the success-rule is applied to it (because it is optional and therefor valid).
Now I wonder if there is a possibility that no error and no success message is shown at this field, because it is optional and it looks strange if it is empty and there is a success message…

Thx,
Jacob

I’ve traced the IE6 problem with 1.1.1 + 1.2.1 to url validation:
[code]
return this.required(element) || /^(https?|ftp):\/\/[A-Z0-9](\.?[A-Z0-9ÄÜÖ][A-Z0-9_\-ÄÜÖ]*)*(\/([A-Z0-9ÄÜÖ][A-Z0-9_\-\.ÄÜÖ]*)?)*(\?([A-Z0-9ÄÜÖ][A-Z0-9_\-\.%\+=&ÄÜÖ]*)?)?$/i.test)(value);
[/code]

IE6 wants and extra ‘]’ somewhere near the end (I can’t really trace an exact char now – I don’t have IE6 on this computer, but it was 170-180, 177 maybe?)

Since I don’t use url validation anywhere I just removed it entirely and it works fine – just get rid of the lines:
[code]
url: function(value, element) {
return this.required(element) || /^(https?|ftp):\/\/[A-Z0-9](\.?[A-Z0-9ÄÜÖ][A-Z0-9_\-ÄÜÖ]*)*(\/([A-Z0-9ÄÜÖ][A-Z0-9_\-\.ÄÜÖ]*)?)*(\?([A-Z0-9ÄÜÖ][A-Z0-9_\-\.%\+=&ÄÜÖ]*)?)?$/i.test)(value);
},
[/code]

Hello All,

i combined the form Validation and the thickbox iframe together, it is working for me only with FF, but IE not.
if i call the form page directly it is working fine, but if i call it with thikcbox iframe, it is not working with IE.
any idea guys ???

Jörn, gute Arbeit, Vielen Dank.

Regards
Johhanes

Hi Jorn,

I am having trouble with the validation plugin in IE6. Using plugin 1.1.1 and jQuery 1.2.1. Specifically, when trying to validate an email field, IE gives me the error “Line 14, Character 6: Expected identifier, string or number” when the page loads, and on an attempt to submit. Here is a test page:

http://www.igigi.com/tests/testvalidate.html

Works fine in FF. Any suggestions are appreciated.

@Marco: I’m not sure what else you may need. The form plugin’s ajaxSubmit method allows you to do exactly what you described.

@Jacob: Good point. So far the two states are rather fuzzy implemented and I need to add support for a pending-state for ajax validation. So I need to work on that anyway – I’ll try to find a good solution that allows you to tackle those special cases.

@Maciej: I guess its an encoding problem. The file should be read as UTF-8. I guess our best bet is to simplify the regular expression – making it a little bit less precise but more tolerant to wrong decodings.

@Johannes: Can you provide a testpage?

@Josh: You’v got an illegal trailing comma on line 13. Easy to spot using Webdeveloper Toolbar (Disabled -> JavaScript -> Stricts Warnings) and Firebug.

I’m getting the error:

this.settings.messages[element.name] has no properties

whenever i use the ‘remote’ option. My code is almost identical to the “Remember the milk” example, yet mine doesn’t work. Has anyone encountered this problem? please help!

Al

Egads. Thanks Jorn.

Hi,

I notice that when the class is add in the validate when occurs any errors, the plugin adds the same class in the input that generated that errors. This can generates troubles, because the class that I give a error cannot sometimes act like the input, like a float lef in css, for example. So I remove the line 743 of the version 1.1.1 revision 3675 to avoid the same class be applied in the input.

If you wish, you can leave this line in the next revision because if you want to apply the error class in input, its just put errorClass to input if you want that the error be applied there.

Very nice plugin, its essencial…

Im having a problem with the addittional methods. when I tried to use, for example, lettersonly, it gives a error “this.optional(element)” is not a function in the firebug console. I see some others people commenting about this error too and found the answer in a lot of place and didnt found.

thanks…

Hi, Jorn, thats me again.

I change the line this.optional to this.required. It stop the error in console, but still doesnt work. Please give me a help. I made a lot of tries…

I make a debug in one method like nowhitespaces and others and discover that the method added always returns false, even with whitespace. Its very strange what can be happen. I add some simple validate methods just to test in the core and still doesnt work. Please I wait for your reply…

Let me ask another thing, the remote validation works in version 1.1.1??? I see the change log and it seens to work just in the version 1.1.2, but Im not seeing in the download page… one more time, very thanks, its a terrific plugin…

Is it possible to have validator check the length of a field where the length would be submitted via an ajax query of a select’s value? the ajax query would return true/false.

Example
select a country
enter a telephone number

user clicks submit
validator sends value of the select and the phone number and then gets a true/false before submitting the form

Got code?

Hi,
Is there any way to specify which domains the email addresses should come from. For example, could it allow name@apple.com and name@pears.com, but not any other domains?

Thanks.

@Alexandre
I may have the same problem as you using the .pack and .min versions of validate. The ‘remote’ function seems not in there as of yet.

Jorn wrote 11. Oktober 2007:
———————————-
@Alex: Thanks for the report. I should’ve updated those. Currently I’m having difficulties with the build script, something is broken there. Until I figure that out, you could just use Dean Edward’s packer directly.

http://dean.edwards.name/packer/
———————————-

Doing this worked fine for me.

Got a problem. If a field is disabled when the form is loaded and then you have code to enable it based on certain criteria (ala a checkbox is checked). Validation on the newly enabled field doesn’t work. It seems to only work when all fields are enabled when the form is loaded. Got any suggestions?

Hi, Now it works this plugin and I figured out the remote validation with css. The only problem is that I need to make a synchronous request to make works, but it works for me.

Im having a problem with the event. No matter what event I put in event options, the required method doesnt work onblur, if I mistake with another validation, and the plugin start to work, then if I put the empty fill in the input, the required works… but not in first time. The strange is that when the first error occurs, the plugin start to inspect the valid field onkeyup… Because I create a remote validation, this cannot be happen, its lot request to the server… If anyone know how solve this trick, any help would be appreciated…

I need to make tests with the remote validation, but soon I will post here to share with everyone… very thanks…

hi,

this is a great plugin very useful but I have got issue when using the plugins in IE…
I use jQuery 1.2.1 and jqValidate 1.1.1

…

Quick Question. How can I hide the error on another element other than the one curretly being validated? Here’s the scenario. I have a custom validation method that fires if either one of two elements are not filled in:

$.validator.addMethod(“phone”, function(value, element) {
if($(‘#call_me’).val() != ”){
return $(‘#phone’).is(‘:filled’) || $(‘#mobile’).is(‘:filled’);
}
return true;
}, ‘Please enter at least one phone number for me to call you at!’);

When the validation fires, it displays the message next to the “phone” element. However, when the user enters a mobile #, the error label remains next to the phone element.

I need to add something in the method above to either triger a recheck of the phone element if the element currently being checked is mobile and return is true, or manually hide the error label. Your help will be greatly appreciated. Thanks in advance.

I think I found an answer to my question. Is there a better way to do this?

$.validator.addMethod(”phone”, function(value, element) {
if($(’#call_me’).val() != ‘’){
if(( $(’#phone’).is(’:filled’) || $(’#mobile’).is(’:filled’) ) == true){
if(element.id == ‘phone’){
$(‘label.error[@for="mobile"]‘ ).hide();
$(‘#mobile’).removeClass(‘error’);
} else if(element.id == ‘mobile’){
$(‘label.error[@for="phone"]‘ ).hide();
$(‘#phone’).removeClass(‘error’);
}
}
}
return true;
}, ‘Please enter at least one phone number for me to call you at!’);

@Al, Alexandro: Remote validation isn’t included in 1.1.1. It will be in 1.2 – until then you can try the latest revision.

I’ll try to test and fix the additional methods. Most likely they don’t work due to changes to validator.required (now named optional).

The event-option doesn’t exist anymore. Instead, there are options onsubmit, onkeyup, onblur and onclick. To disable one of these, set it to false.

@Steffan: That needs a bit more sophisticated remote validation. I’ll try to cover that once the basics work as intended. My goal is to provide the necessary infrastructure that allows you to write your own remote-validation-method with ease.

@Richard: You should implement that as a custom method.

@Jay: You need to call validator.refresh() after changing the disabled attribute. With the latest revision you can pass the updated element to the refresh method to update only that one.

@FreakDev: You need to be a bit more specific. “Don’t work” is not enough to provide any help. Test pages are welcome.

@David: For a start, you could check the checkbox using a required-dependency. Though I’m not sure if that would really simplify validation method.
I’ll let you know when I can come up with a good solution.

Anyone know how to trigger the check with an image instead of the input type=submit? I have this for our form:

Thanks, Olin

Thanks. Just to clarify, the checkbox or drop-down for whether the user wants to be called is not important. Let’s just say I need at least one of two (or more) fields to have data entered. I’ve updated my previous table validation example to include this method. Please find it at:

http://www.rfcmultimedia.com/table.html

In my example, I had to set up two itentical methods, but one without a message. Otherwise, the message would have displayed under both phone and mobile. Also, if the number of optional fields is increased, this complicates the if/else or switch statements needed for hiding the other error message. Is there a better way to do this?

One more question, which is a bit more important. In my example above, I’ve set up a number of individual forms (one for each row of the table), so they can all be validated and submitted individually. I had to set up a validation object for each form on load. Is there a way to only create the validation object and attach it on the form on submit (as the user may only be changing one row in the table)? I tried setting up a function but it kept creating a new validator object for the form each time the form was submitted. How can I check if a validator object for a particular form has already been created and use that instead of creating a new one? I appreciate your help.

I’ve posted an example with regards to my question above at:

http://www.rfcmultimedia.com/table1.html

Note that with each time I submit an individual form, I get increasing replies. This tells me that each submisison creates another instance of the validator object for that form. Thus, when the next submission comes, it triggers one more submission than before. How can I call the existing validator object for an individual form rather than create a new one each time a successful validation/submission occurs?

Same thing applies to my submitAll function, where I need to validate/submit each form without creating an additional validator instance for each form.

Thanks again for your help.

Hello, Thanks for the great plugin.

I’m having a problem getting it to work in IE 6 and 7. I’ve downloaded the files and uploaded them to my server and they work perfectly. When I modify the code to work for my form it doesn’t work. Please help me!

http://www.ces.ncsu.edu/depts/fourh/vlc/jquery_help.html

I found the problem. Extra comma causes it not to work in IE 6 and 7

Zip: {
required: true,
minLength: 5,
maxLength: 5 /* No comma here! */
}, /* if this is last item then no comma here either! */

First, great plugin! much appreciate your work!
Second… I’ve built a form that requires users to upload a file with no white spaces in the name. I cannot figure out how to get the form plugin to validate the file name. Can you please help me?

Hello,

How to provide animation effect (e.g. fadein) when showing the label? Any codes sample?

Hi!!
Thanks for a great plug-in.

I’ve tried to make a own phone/fax valitation for sweden but dont know how to call it.

$.validator.addMethod(“urphone”, function(value, element) {
return !this.required(value, element) || /^d{2,4}-d{5,9}$/.test(value);
}, “This is a default error message”);

$(“#becomemember”).validate({
rules: {
phone: {
//not required
urphone: true
},
fax: {
//not required
urphone: true
},
},
messages: {
phone: {
urphone: “Error in Phone” // override default message?
},
fax: {
urphone: “Error in Fax” // override default message? },
}
});

Hey, I was wondering if it’s possible (or to implement) a system where all the textboxes from a certain group must add up to a certain number?

For example: http://www.campusfood.com/menu/toppings.asp?campusid=127&restid=5343&catid=72679&itemid=636572&sizenum=1

Hi Jörn,

Here is my problem : I have horizontally displayed radio boses and the alert message (when nothing’s choosen) is displayed under the first radio box and the following radio button on the right of the alert message!
This give:

o
please choose Mr. o Mrs

Any idea to correct this?

Got it!

errorPlacement: function(error, el) {
if ( el[0].type == “radio”){
error.appendTo( el.parent(“div”).next(“div”) );
}else{
error.appendTo( el.parent(“div”) );
}
}

If your fields are in a table, replace DIV with TD.

This is really a great plugin!!!

Settings actually does not support array notation for fields eg:
…
choose[]: “required”,
…

It seems, that the regex for email checking is broken.

Because you can enter a point before the @

Example:

test.test@test.test is a valid adress but is higlighted as incorrect.

Guido’s fix works!
Many thx to all …

The submitHandler present the form object with only fields having a validation rule.
To be able to clone all fields in another form, I added this method :
$.validator.addMethod(“none”, function() {
return true;
}, ”
);
and declared the according rule :
cb_newsletter: “none”

There may be a better way to do so…

I have been attempting to use this plug-in on one of my webpages. I have a site that is in development that integrates with phpbb and I have a custom form that I need to validate.

So far I have not been able to get it to work on my site. Each time the page loads I get $.validator is null or not an object. I can’t figure out why. Have you run across this before? Before you ask, yes, I am loading both jquery and query.validate.

Do I need to create a new validator object somewhere that I have missed?

Howdy Jörn,

Love the plugin.

One problem I am having: adding an errorPlacement function when the second argument (where the error element is placed) is placed outside the form (i.e., using element.parent().parent()) completely screws up the error messages – I get a long list of errors (they repeat on every blur and focus and don’t disappear when the input element passes validation).

How can I fix this?
Thanks

Hi,

first thank you for the plugin, it is great and very helpful!
I think I’ve discovered a bug though, and it happens with IE6 (haven’t tested with ie7, in firefox it works ok) and when using a form that has tabs. The problem seems to occur when there is a validation error on one of the fields that is in a tab that is not active. On the first click on submit nothing happens (which is suppose as it should be as the plugin is not aware of tabs), but if i then click again on submit the form gets submitted anyway even though it contains errors. I’ve traced this to the focusInvalid function, and it seems if an exception is triggered, even though it is caught – it still does something weird that then causes next submit to not be caught at all.
I’ve managed to work around it by changing the function to fit my scenario, so that I first check if the field is in a tab that is not open, then open a tab, and focus on it via setTimeout – this seems to be the only way not to trigger an exception. However this is very specific to my page and not usable for other occasions.
So, two questions – any idea on how to solve this in a general way? Tabs plugin aware validation plugin?

Or, simpler for me – how can I just replace focusInvalid function without changing the actual .js file? my jquery and javascript knowledge is not enough to know if this is possible at all…

Thanks for your help!

ok, I’ve managed to find an answer for the last question. I did this:
$.extend($.validator.prototype, {
focusInvalid: function() {
… messy code to handle tabs …
{
});
and it seems to work.

STUCK -

i am usuing the validation which is cool, but this all happening via ajax and when my little form gets submitted it loads a comment page up so you can see what you just posted. i have 2 javascripts – jquery validate and jquery ajaxsubmit. if i submit a blank form the errors appear then the ajax just submits it anyway. how can i stop it from happening? the link below is loaded into a div on a page with all the js files in the parent file etc so dont expect the form itself to work properly! just to check out the javascript im running in the view source. any help well appreciated!!!

please email me

http://www.enterf1.co.uk/v5/news/_bite-point-post-comment.asp

Hello,

i’m using Javascript to dynamically create elements using document.createElement(“input”). How can I attach validate functions to these dynamically created elements?

Thanks,
Marvin

Hi again,

I worked around the problem by simply using the errorPlacement function to place errors inside the form, rather than out.

One more question, however:

I’d like to have the errors show in a separate column of the form, and I have that, but I would like a column header (e.g., Errors!) show up if there are errors in the form. So, if there are no errors, the heading doesn’t show up – if there are, the heading shows.

Thanks for your help and the wonderful plugin.

thanks for the great plugin! quick and easy question…

how would i require one field but only if another field’s value equals a given string? for example, i want to require a state only if the country equals US. Non-working example:

——————————
state: {
required: function() {
return ‘$(“#country”).val():US’;
}
},
country: {
required: true
}
——————————

Hi,

I’m using date validation for date of birth field.
txtdob: {required: true,date:true}

but, it accepting the date value as “22/22/22″ also. Please help me, how can i accept only valid dates.

Hello,

I’m trying to use the validation on Netscape Navigator 7.2 but it’s having issues using the metadata plugin. Here’s the javascript error I’m getting:

Error: invalid quantifier {
Source File: jquery.metadata.js
Line: 95, Column: 13
Source Code:
if ( !/^{/.test( data ) )

Any ideas ?

Another problem I’m having..in IE, when you try to validate a radio button, it highlights one button and the other one is not highlighted, although if one is picked it’ll be valid. Is there a solution for this?

Thanks,
Marvin

Hi,
1. found the following bug
where a form contains a field that has id for name, validate doesn’t work any more

&lt input type=”hidden” name=”id” value=”4190″/>

2. how can I activate the validation from a standard javascript ?

Thanks

Some suggestion for regex for email:


email: function(value, element) {
return this.required(element) || /^[\w\-\+\.]+@([\w\-]\+\.)+[\w\-]{2,}$/i.test(value);
},

better to escape all the `-`, `+`, more readable and compatiblie with other languages

Hi,

Can you add multiple entries in the title field?:

<code>
Pseudo
title=”{required:This field is required, equalTo:Same as other please}”</code&gt

Can you add functions to the class field?:

<code>
Pseudo
class=”{required:function(){if(!($(“#telephoneNumber”).val())){return true;}}}”</code>

I can’t seem to get either to work and want to be able to create and edit validated elements just in html code. Any help would be GREATLY appreciated.

I would like to know too if someone has a way to validate dynamicly generated fields.

Thanks for this wonderfull plugin!

Hello,

thank you for this wonderful plugin. I use it in combination with the Tabs of the UI. In FF everything works very well, but in IE 6 not. When i chose to submit, the form fields are validated. After that the Tabs aren’t clickable anymore and it’s possible to submit the form without validation.

Grtz
Reijer

Has anyone create an additional method for validating postal codes, specifically checking the form value matches this format:

LETTERNUMBERLETTERNUMBERLETTERNUMBER

OR

Z8X9A2

Thanks

Jorn,

I have a problem with validation in ie6.

here is my code:

$(document).ready(function() {
var options = {
target:’.cfjq_form_target1′,
beforeSubmit: function(){
$(‘.cfjq_form_target1′).empty();
$(‘.loading1′).show();
},
success: function() {
$(‘.loading1′).hide();
}
};
$(“.cfjq_form1″).validate({
errorContainer: $(“.messageBox1″),
errorLabelContainer: $(“.messageBox1 ul”),
wrapper: “li”,
submitHandler: function(form) {
$(form).ajaxSubmit(options);
}
});
});

IE6 simply tell me that the line
$(“.cfjq_form1″).validate({

the object to not accept the method.

Any idea

I am using metadata, validation 1.1.1 and jquery 1.2.1

Thanks

Andrea

Jörn Hi,

First I would like to thank the excellent work!

I am having a problem with remote (the same as Anthony), it seems that while he is making the request that he be sent to the form. I am doing my new site using its system and did not want to change it, but not found a way of making the request while it does not display a message or allow submit.

I would like me advance a solution? I think I can not wait to leave the new version.

I apologize for nuisance and the English, my language is Portuguese.

Thanks!

I keep getting thrown an error in IE : expected “]” in regular expression. This is also causing an object not found error, because if javascript fails in one place it will not validate for the rest of the page.

I’ve pinned the error down to the following URL regex in validate.js

(\.?[A-Z0-9ÄÜÖ][A-Z0-9_\-ÄÜÖ]*)

This is right near the start.
Does anybody have an idea for a fix here?

bug:if my page had AdSense,IE6 could not wolk ,firefox is ok

On the issue of remote, my suggestion is that while he is making the request, appears a loading and not allow to undergo, when he requested the end show the errors.

Att Marcos Aurélio

Robert,

I had this issue too, was causing a whole world of problems on both IE and Safari. I eventually pinpointed the URL section too and haven’t found a solution, but just ended up commenting that section of code out: decided i didn’t need it.
Wouldn’t mind knowing a proper fix for that either.

Even I set event: submit, the error detection also occur when the input lose focus?

Hi,

Im’ a newbie with this plugin, but I have a Jquery bug at line 514 of th unpacked 1.2.1 “elem has no properties”.

[...]
511 data: function( elem, name, data ) {
512 elem = elem == window ? win : elem;
513
514 var id = elem[ expando ];
[...]

The jquery.validate work’s fine but the alert bug his “bad”.

Thks for help

I found the problem.

my form had a name but no id

Hi! The demo on the jquery wiki doesn’t seem to work (firefox, opera). No errors, and no validation.

Also, I can’t seem to get it working myself either

Hi – I’ve scoured the pages and docs, so hopefully this isn’t a very obvious. I’m pretty new to jQuery unfortunately – it, and this plugin is very cool though.

I simply want to enable or disable a submit button based on whether a form is currently valid.

I can currently disable the submit button if there are form errors:

$("#cmxform").validate({
showErrors: function(errorMap, errorList) {
disableSubmitButton();
this.defaultShowErrors();
}
});

But i can’t work out a callback name which will enable the submit button if the form appears valid at the current time.

Any help appreciated.

/Mark

Hello Jörn,

This looks like a very nice plugin, but it took me a few hours to figure out that it depends on jQuery 1.2, which means that Drupal users such as myself can’t use it. (The current Drupal release (5) officially supports only v1.0, but some people have hacked it up to v1.1.)

The problem is that jquery.validate calls jquery.metadata which calls jquery.data(), added in jq1.2 . Can you suggest a workaround for this?

Version management seems to be a bit messy in jQuery land; I’d propose that plugin authors number their modules to match the jQuery version they depend on … so your 1.1 version could be 1.2.1, the next one 1.2.2, etc. But there may be a better way.

Thanks,
-mykle-

Hello Jörn,

Is there any way to add animation effect on error messages. I am able to add effect on success messages by implementing the success function i.e


success: function(label) {
// set   as text for IE
label.html(" Ok!").fadeIn("slow");
}


but not sure how should i implement it for invalid input messages. I want to implement this animation on blur event only. Can you please suggest any possible way??

Hello,

Nice plugin!
I have a problem when using ajax to alter the document. Any feedback would be appreciated.

I have a php page with many tabs. On intial loading, a designated section of the page is empty (div). When you click on a tab, it loads a with fields…etc using ajax in that empty div. This form has validation rules but it does not work; as I understand, because the jQuery validation needs to be reinitialized.

1) Can you give me an example of how to handle reinit of dom in this situation?

2) also since the intial loading of the page does NOT contain any forms, the page generates a JS error – because validation is present in but no form is present.

Thanks again!

I have removed some element on the page and added how element, how to make the newly added element to work with the validation plugin ?

Hello Jörn,

I finally started to get some results from the validation. It took me a while because I was using the wrong versions of jquery.js and jquery.validate.js together.

My question is this;
How would I return 2 separate types of error message in the same form.

My form is made up of both tables and a tableless div layout. I have 3 radio buttons that need to be validated in the table and I am unable to get an error message to appear. I want only the error message for the table radio buttons to appear in the error container. All other error messages would appear near their respective input field.

My though was to use an error container under the table for the radio buttons, however I am unable to make that work either.

The form is at http://www.mailhost123.com/work/order_he_jscript.htm

Thank you,

Jamie Jensen

Hallo Jörn,

sehr schönes Plugin.

Weiter in Englisch:

I’ve tested your plugin, it works very well.
The only two things I don’t get solved are

- The remote function. Isn’t it stable yet or do you have already a solution?
- I don’t get it working to submit the form via AJAX. I’ve searched the net, but I never found a solution. Also your Script example isn’t working for me.

Could you give me some help? Thanks in advance.

Viele Grüße
Felix

Hi Jörn,

first of all congrats to such a nice plugin!

Regarding the error of Yann (20. Dezember 2007 |16:55):
I also got the same error.

I found out it was due to some shared JS-code on two pages which called $(…).validate().
One page had the right form-id in it, in the other (test)-page, the id was different.

As to my understanging, calling functions on empty jquery-objects should not result in an error, so:
$("#n_a").size();
is just fine.

However, calling:
$("#n_a").validate(…);
results in the error
elem has no properties

This is because this[0] is directly accessed in jQuery.fn.validate.

Putting the following line on top:
if (!this[0]) return;
(or something like that) does the trick.

Best regards,
Peter

Hello Jörn,

I have 2 issues that I will address with 2 posts. My first is custom error placement. I have 2 different radio button groups that I wish to have the error displayed somewhere other than the bulk of error labels.

I was able to use the if…else statement found in one of the demos to specify where the error was placed. The shortcoming to this is that only one of those works. I need two error messages in different locations for the radio groups.

Thoughts?

You can see the page, errors and source at http://www.mailhost123.com/work/order_he_broken.htm

Thanks,

Jamie Jensen

My second question is completely hidden from me.

I have a section that is hidden on my form unless a radio button is selected.

If the button is selected and the fieldset is then visible the fields are required. If not, don’t bother with them.

I am also trying to use an if…else statement here but I get errors that I am unable to understand.

I have also just tried to use …
required: function() {
return ($j('#billing_cc').css('display') != 'none');
},

… but the ‘error’ label still gets applied and the form is not submitted.

What am I doing wrong? (besides trying to act like I can program…)

Thanks,

Jamie Jensen

ok, so maybe I am just lazy and not stupid? I’ll leave that to the reader to decide.

The validation problem in my second question was caused by improper placement of the function? The required portion of the validation process.

I had …
cc_state: {
required: function() {
return ($j('div#billing_cc').css('display') != 'none');
}
required: function() {
return $j("#cc_state").val() !== 'Select a State';
}
},

Which cause the required component of the field to always be checked.

I changed it to …
cc_state: {
required: function() {
return ($j('div#billing_cc').css('display') != 'none');
}
required: function() {
return $j("#cc_state").val() !== 'Select a State';
}
},

and it worked properly.

I am checking 9 fields, is there a better way to make my code block a bit smalled and more efficient?

Thanks,

Jamie Jensen

err… proving my point ? *shrugs*

original…
<code>cc_state: {
required: function() {
return ($j(‘div#billing_cc’).css(‘display’) != ‘none’);{
required: function() {
return $j(“#cc_state”).val() !== ‘Select a State’;
}
},</code>

changed and working …

<code>cc_state: {
required: function() {
return ($j(‘div#billing_cc’).css(‘display’) != ‘none’); {
required: function() {
return $j(“#cc_state”).val() !== ‘Select a State’;
}
}
}
},</code>

Hi,

I’m trying to work out how to apply validation to a form that allows users to dynamically add and remove elements. To achieve this I’m just using the JQuery clone method.

The fields added to the form are “required”, but the validation doesn’t seem to want to apply to the newly added fields. In fact it seems to be validating the originally cloned field instead.

Looking at the comments on this page I think I need to be using the refresh() method but this isn’t documented, and seems to have been removed from the most recent code: the dynamic totals example doesn’t seem to use it either.

Is there some documentation or a simple example of this somewhere?

I am trying to use this plugin with a control array, but I can’t seem to get it working. The way I have it setup is something like:


<form id="reg1Form" class="pretty" method="post" action="">
<fieldset id="badge">
<legend>Your Registration Information</legend>
<ol>
<li>
<label for="register_name[]" class="required">Full Name:</label>
<input type="text" name="register_name[]" class="medium" maxlength="32" />
<span class="tip">First then last (e.g. John Doe)</span>
</li>
</ol>
</fieldset>
<input type="button" id="register_add_guest" name="register_add_guest" onclick="addGuest();" class="addguest" value="Add Guest">
<input type="submit" name="register_submit" class="nextstep" value="Next Step">
</form>


Now validation works fine at this point until I click “Add Guest”, which closes the “badge” fieldset and inserts it before the buttons. After the clone I have this in the code:


<form id="reg1Form" class="pretty" method="post" action="">
<fieldset id="badge">
<legend>Your Registration Information</legend>
<ol>
<li>
<label for="register_name[]" class="required">Full Name:</label>
<input type="text" name="register_name[]" class="medium" maxlength="32" />
<span class="tip">First then last (e.g. John Doe)</span>
</li>
</ol>
</fieldset>
<fieldset id="badge1">
<legend>Guest #1 Registration Information</legend>
<ol>
<li>
<label for="register_name[]" class="required">Full Name:</label>
<input type="text" name="register_name[]" class="medium" maxlength="32" />
<span class="tip">First then last (e.g. John Doe)</span>
</li>
</ol>
</fieldset>
<input type="button" id="register_add_guest" name="register_add_guest" onclick="addGuest();" class="addguest" value="Add Guest">
<input type="submit" name="register_submit" class="nextstep" value="Next Step">
</form>


But now the first fieldset is the only one being validated. The user can click “Add Guest” as many times as they want as well as remove individual fieldsets if they decide they no longer need them. However, I can’t get the form to validate the dynamically added fields.

Any help with this would be greatly appreciated.

hi,
I just got ajax validation to work on our site using the latest FC1 of jquery.validate(). Brilliant stuff!

I’ve run into two glitches this far:

1) Every now and then the form submit button won’t work although all fields in the form are valid, this happens a lot when I use ajax fields (that check for unique email/username, etc).

2) I’ve tried to make small script for highlighting fields (displaying a checkbox mark as user feedback) for valid fields. It looks something like this:

var username = $(“#user_username”);
username.blur(function(){
if (validator.element(username)) {
username.addClass(‘valid’);
}
});

Unfortunately the validator.element function returns undefined every now and then, so I cannot really use this. Is there another way of doing this? What I basically want to do is assign a “valid” class on blur to form fields that are valid.

Here’s my form code:
http://pastie.caboo.se/140481

Thanks for a great plugin! // eric

Hi again,
regarding 2) above this only fails on fields that are checked with ajax.

cheers // eric

That last post reminds me I made an edit to your code:

if ( !this.depend(param, element) )
changed to:
if ( !this.depend || !this.depend(param, element) )

I was getting an error that this.depend was not a function and it was making the rest of the validation fail.

Hey Jörn,
I was trying to implement the latest revision of the validation plugin but it did not work. So I followed all of the revisions and realized that my form stops working right between revisions 4325 and 4329 (meaning 4325 is the latest revision that worked for me).
I tried doing a comparison (http://dev.jquery.com/changeset?new=4329%40trunk%2Fplugins%2Fvalidate%2Fjquery.validate.js&old=4325%40trunk%2Fplugins%2Fvalidate%2Fjquery.validate.js) between the two but no luck. What could it possibly be?
Thank you,
Yuval

Sorry for not responding here for quite some time. The comment system just doesn’t scale for that many comments. I’ll respond to each one since my last respnd, then shut down comments here and add pointers to future support forms. Thanks!

All answers below will assume the 1.2 release, please upgrade if you haven’t already.

@Olin: You can manually validate a form using the valid() on the form, as long as you init the validation before that. Give this a try:

$("#myform").validate();
$("img.submit").click(function() {
  if ($("#myform").valid() ) {
    // do something cool when the form is valid
  }
});

@David: The validation 1.2 creates only a single validator for a given form, no matter how often you call validate(). That should fix the basic problem you describe.

@Erick: You should implement your own custom method which checks for whitespace in the filename. See $.validator.addMethod for details.

@Howa: Enhancing error messages with animations is something I’ll try to tackle in 1.3, among other issue in that area. Animations work only on block elements, so the form layout must be optimized to support animations.

@gabe: Yes, and there is an example showing how to implement it. See the dynamic inputs example. In that case it checks that a group of field doesn’t sum up over a certain total value.

@Laurent: Right, either customize error placement, or place the label in the form beforehand. You can hide it via CSS and the validation plugin picks it up and displays it.

For “array notation” you need to use quotes, eg. “bla[]“: “required”.

@zeek: 1.2 features a complete overhaul of the email method, as well as the URL method.

@Sheldon: Displaying messages outside the form (still) isn’t supported. “Finding” error elements depends on field-names, which are only unique inside a given form. I’ll try to tackle that in 1.3.

For displaying general messages you should use the errorContainer option of the validate method.

@robert: There are problems with tabs, right, I haven’t yet tried to tackle them, but will in 1.3.

@Marvin: Validating dynamic elements is very easy in 1.2, you just need to find a neat way to create the elements and add them to the form, everything else works out-of-the-box. See the dynamic inputs example.

@palPalani: The provided date validations are not capable of doing that, you’d have to implement your own birth-date-validation. The dateJS library may be helpful for that.

@John: Nope, title doesn’t support multiple entries. Functions in the class attribute should work as long as you escape quotes properly. class=”{bblabl:”flafl”}” won’t work. Use single quotes instead: class=”{blaba:’flfa’}”.

@Marcos Aurélio: Please give the remote validation in 1.2 a try. Its now complete and tested.

@Robert: The regexes for email and url are completely replaced in 1.2.

@Andreas R: Fixed!

@mykle: Drupal 6 includes jQuery 1.2.x, so once that is available… The validation 1.2 release doesn’t require the metadata plugin anymore for inline-rules, but requires 1.2.2+ nonetheless. Keeping compability with older version isn’t worth it from my perspective, sooner or later everyone should be able to upgrade to current jQuery versions.

@Vishal: Doing animations only on blur isn’t possible yet. I’m going to work on better support for animations in 1.3.

@chadi: Currently you’ve got to check for existance of the form before calling validate. As long as you call that when the form actually exists everything should work fine.

@Adisonz: The 1.2 release contains a lot of improvements to support dynamic forms. Please give it a try.

@Jamie Jensen: The easiest approach would be to place the designated error message element in the form and hide it via CSS. The validation plugin will look for the element and show it accordingly.

@Felix: Remote validation is now stable. Did you take a look at the ajaxSubmit-demo?

@Peter: True, that is a flaw in the validation plugin. That validate method breaks the usual plugin model in other aspects, too. I’m planning to fix these in the 2.0 release, which will break a lot of compability while cleaning up a lot of mistakes of the past. Until then you’ve got to make sure that the form exists before calling validate.

@Leigh Dodds: Please give the 1.2 release a try, it contains a lot of improvements for dynamic forms. The refresh() method is gone as there is no need to call it anymore.

@SubOne: For the validation to work you’d have to change the name of the cloned fields. I’ll try to figure out a way to validate fields with xxx[] names, as that is too common in PHP land.

@Eric Wahlforss: The second issue is easy to resolve by using the success-option, please take a look at the docs for validate(). That’ll work for remote checks, too.

The first issue was a bug, thanks for reporting. The fix is included in the final 1.2 release.

@SubOne: That change looks like it supresses the symptom, but doesn’t actually fixes the issue. Could you provide some feedback about the actual issue, eg. a testpage?

Comments here are now closed.

• Please post questions to the official Using jQuery Plugins Forum, tagging your question with (at least) “validate”. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.
• Please post bug reports and other contributions (enhancements, features, eg. new validation methods) to the plugins.jQuery.com bug tracker (requires registration).