Wednesday, 11 September 2013

Jquery validator wrapper regexp change on the fly

Jquery validator wrapper regexp change on the fly

I'm using JQuery validator plugin:
$(document).ready(function() {
// 1. prepare the validation rules and messages.
var rules = {
request_document: {
required: true,
regexp: valid_id
}
var messages = {
request_document: {
required: "Please enter your document number",
regexp: "Please check your document number"
}
// 2. Initiate the validator
var validator = new jQueryValidatorWrapper(
"myform",
rules,
messages
);
$.validator.addMethod('regexp', function(value, element, param) {
return this.optional(element) || value.match(param); // Compare with
regular expression
},
'Please check your data.');
// 3. Set the click event to do the validation
$('.finalizebut').click(function() {
if(!validator.validate()){
return;
}else{
$('#myform').submit();
}
});
valid_id is a correct javascript regular expression I use for match. Now,
I have a select in my form, id="doctype", whose options are "national ID
card", "passport", "driving license", etc., and I want that on changing
this select value the forms validates request_docuement against a
different regex.
I tried to change rules.request_document.regex but it obviously doesn't
work as the validator objet is created at document.ready time.
So I tried a brute-force method: create a second validation object and
call validate() on it or the former, based upon select#doctype value:
$(document).ready(function() {
// 1. prepare the validation rules and messages.
var rules = {
request_document: {
required: true,
regexp: valid_id
}
var messages = {
request_document: {
required: "Please enter your document number",
regexp: "Please check your document number"
}
// 2. Initiate the validator
var validator = new jQueryValidatorWrapper(
"myform",
rules,
messages
);
//2b. Initialize my second validator
rules.request_document.regex=valid_passport;
var validator2 = new jQueryValidatorWrapper(
"myform",
rules,
messages
);
$.validator.addMethod('regexp', function(value, element, param) {
return this.optional(element) || value.match(param); // Compare with
regular expression
},
'Please check your data.');
// 3. Set the click event to do the validation
$('.finalizebut').click(function() {
if(parseInt($("#doctype").val())==0){
if(!validator.validate()){
return;
}else{
$('#myform').submit();
}
}else{
console.log("hey");
if(!validator2.validate()){
return;
}else{
$('#myform').submit();
}
}
});
I've tried it but form validates correctly only if I don't touch
select#doctype. If I change its values and the try to submit, nothing
happens (but it prints "hey" on the console).
Anyway I know this would have been a horrible solution to my problem, so
if someone has a better solution it would be wonderful. I know I could try
to write down a single regex to check against more types of documents, but
this would definitely be beyond my programming skills, and also I prefer
to maintain my regexs as clean and easy as possible.

No comments:

Post a Comment