PDA

View Full Version : Custom validation VType, mimicking multiple valids.



TotoTitus
8 Sep 2010, 9:32 AM
I took an idea i found on superdit.com about validating a field in multiple ways, and i wrote some code, which does it's job, only partially:
I use it to validate a username field in a registration form. I check for its length, regex and unicity.


var usernameRegex = /^[a-zA-Z][a-zA-Z0-9_#&\$-]{5,19}$/;
var usernameErrorLength = 'Username must be between 6 and 20 characters long.';
var usernameErrorInvalid = 'Username has an invalid format.';

Ext.apply(Ext.form.VTypes, {
user_unique: function(val) {
if(val.length < 6 || val.length > 20) {
Ext.apply(Ext.form.VTypes, {
user_uniqueText: usernameErrorLength
});
return false;
}
else if(!val.match(usernameRegex)) {
Ext.apply(Ext.form.VTypes, {
user_uniqueText: usernameErrorInvalid
});
return false;
}
else {
Ext.Ajax.request({
url: 'user_unique.php',
method: 'POST',
params: {
'user': val
},
success: function(response) {
if(response.responseText == 'nil') {
Ext.apply(Ext.form.VTypes, {
user_uniqueText: usernameErrorUnique
});
//The code actually gets here !!!
return false;
}
else {
return true;
}
}
});
return true;
}
},
user_uniqueText: usernameErrorInvalid
});


The code works partially: if the name is too short, then the form complains about length. If it doesn't comply to the regex, though being within length bounds, then again, an appropriate message is displayed.

The only problem arises with AJAX checking - the code gets to the point where i boldened the text, receives the appropriate response ('nil', if database reported the user already exists), but the form doesn't display the appropriate message.

TotoTitus
8 Sep 2010, 11:35 PM
bump

TotoTitus
9 Sep 2010, 6:04 AM
bump

TotoTitus
9 Sep 2010, 6:49 AM
Never mind, i figured it out. Will post later my solution & problem.

moegal
9 Sep 2010, 8:54 AM
I have ajax vtype working, ru sure.

TotoTitus
9 Sep 2010, 11:15 AM
I will delay posting my solution - how did you implement ajax vtype ? Could you please post some code ? I am very curious.

TotoTitus
9 Sep 2010, 12:38 PM
I will now post the multiple VType validation thing.
Code:


var usernameRegex = /^[a-zA-Z][a-zA-Z0-9_#&\$-]{5,19}$/;
var usernameErrorLength = 'Username must be between 6 and 20 characters long.';
var usernameErrorInvalid = 'Username has an invalid format.';
var usernameErrorUnique = 'Username is already taken.';
Ext.apply(Ext.form.VTypes, {
user_unique: function(val) {
if(val.length < 6 || val.length > 20) {
Ext.apply(Ext.form.VTypes, {
user_uniqueText: usernameErrorLength
});
return false;
}
else if(!val.match(usernameRegex)) {
Ext.apply(Ext.form.VTypes, {
user_uniqueText: usernameErrorInvalid
});
return false;
}
else {
Ext.Ajax.request({
url: 'user_unique.php',
method: 'POST',
params: {
'user': val
},
callback: function(options, success, response) {
resetUsernameValidator(false);
if(response.responseText == 'nil') {
Ext.apply(Ext.form.VTypes, {
user_uniqueText: usernameErrorUnique
});
}
else {
resetUsernameValidator(true);
}
}
});
}
},
//user_uniqueText: usernameErrorUnique
});

function resetUsernameValidator(error_flag)
{
Ext.apply(Ext.form.VTypes, {
user_unique: function(val) {
if(val.length < 6 || val.length > 20) {
Ext.apply(Ext.form.VTypes, {
user_uniqueText: usernameErrorLength
});
return false;
}
else if(!val.match(usernameRegex)) {
Ext.apply(Ext.form.VTypes, {
user_uniqueText: usernameErrorInvalid
});
return false;
}
else {
Ext.Ajax.request({
url: 'user_unique.php',
method: 'POST',
params: {
'user': val
},
success: function(response) {
if(response.responseText == 'nil') {
resetUsernameValidator(false);
Ext.apply(Ext.form.VTypes, {
user_uniqueText: usernameErrorUnique
});
}
else {
resetUsernameValidator(true);
}
}
});
return error_flag;
}
},
});
}

Though it does not work entirely: when using validation only when submitting the form, for example, it would require the form to be submitted twice to apply the changes in validation.

moegal
9 Sep 2010, 2:52 PM
Here is what I did.



Ext.apply(Ext.form.VTypes, {
BillBoardNumber: function (value, field){
console.log(field);
if(!field.currentValue){
Ext.apply(field, {originalValue: value});
Ext.apply(field, {currentValue: ''});
Ext.apply(field, {currentValidationStatus: true});
}
var validfield = field.currentValidationStatus;
if(field.currentValue!=value){
Ext.Ajax.request({
url: 'includes/remote-validator-BillBoardNumber.asp',
method: 'POST',
disableCaching : true,
async: false,
params: {
'BillBoardNumber': value,
'OriginalValue': field.originalValue
},
success: function (response, options) {
var obj = Ext.decode(response.responseText);
if(obj.success==true){
field.clearInvalid();
field.currentValidationStatus = true;
validfield = true;
}else{
field.markInvalid(obj.error.reason);
field.vtypeText = obj.error.reason;
field.currentValidationStatus = false;
validfield = false;
}
},
failure: function (response, options) {
return false
}
});
}
field.currentValue = value;
return validfield;
}
});


It sends tons of validations thru so I had to create some custom properties to stop it from validating unless it needed to.

Condor
10 Sep 2010, 12:44 AM
There is a remote validator plugin in the User extensions forum that does this.

moegal
10 Sep 2010, 2:03 PM
I needed it to be in the form of a vtype.