Thursday, April 23, 2009

jQuery CSV validation for user input

I'm using jQuery 1.3.2 with the jQuery Validation plugin 1.5.2 and noticed there was no validation for CSV formatted user input. After looking for a while I did find that I could extend the validation plugin with the additional-methods.js file. It's has some great added validations but still nothing for CSV. So this is to all looking for something for CSV (Comma Separated Values).

Validates for a-z A-Z 0-9

jQuery.validator.addMethod("validcsv", function(value, element) {
return this.optional(element) || /^([a-zA-Z0-9])+(,[a-zA-Z0-9]+)*$/.test(value);
}, "Must be comma separated if entering multiple values: Value1,Value2");


Validates for a-z A-Z

jQuery.validator.addMethod("validcsv", function(value, element) {
return this.optional(element) || /^([a-zA-Z])+(,[a-zA-Z]+)*$/.test(value);
}, "Must be comma separated if entering multiple values: Value1,Value2");


Validates for 0-9

jQuery.validator.addMethod("validcsv", function(value, element) {
return this.optional(element) || /^([0-9])+(,[0-9]+)*$/.test(value);
}, "Must be comma separated if entering multiple values: Value1,Value2");


Alt validation for 0-9

jQuery.validator.addMethod("validcsv", function(value, element) {
return this.optional(element) || /^([\d])+(,[\d]+)*$/.test(value);
}, "Must be comma separated if entering multiple values: Value1,Value2");


Validates for a-z A-Z 0-9 _


jQuery.validator.addMethod("validcsv", function(value, element) {
return this.optional(element) || /^([\w])+(,[\w]+)*$/.test(value);
}, "Must be comma separated if entering multiple values: Value1,Value2");


Now this will validate values for a-z upper and lower case and 0-9 numeric values that are separated by a comma. If you need to modify the Regular Expression to fit your needs please post back with your findings.

4 comments:

Andres said...

Hi first and foremost thank you so much for this, unfortunately I haven't been able to make it work for me. I added it to additional_methos.js and in my html I added class="{required:true,validcsv:true}"

but that does not show any errors. Could you explain maybe a bit more what to do? thanks

Phill said...

And you have the jQuery Validation Plugin as well, correct?

Instead of adding it to the class you might add it to the validation function itself.

This is the link to the plugin I'm using: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

They give some great examples. Let me know if this helped you out.

Andres said...

I downloaded the lastet one from them and i added this:

script src="js/additional-methods.js"

script type="text/javascript"
$(document).ready(function() {
$("#frmSearch").validate();
});
/script

not quite sure what you mean by the validation function itself..im sorry I'm fairly new to jquery still learning.

Phill said...

Well you're just validating the form, you need to call the extra methods something like this:


$(document).ready(function() {
$("#frmSearch").validate({
rules: {
elementName: validcsv
},
messages: {
elementName: "Please enter a valid csv file"
}
});
});


This is just an example and might not work as I haven't tested it. But if you right click this page ( http://jquery.bassistance.de/validate/demo/index.html ) and select 'view source' you can see how to use and call the validation functions