PDA

View Full Version : form date validation



eyepoker
29 Aug 2011, 4:03 PM
my dates dont seem to be validating... all my other validations work ok except for the date... here's what I'm using:



{
type:'format',
name:'dob',
message:'Date of birth',
matcher:/\d{2}\/\d{2}\/\d{4}/
}


i know the regular expression is good... I can only assume that the date is not formatted the same way that it is displayed....

Does anyone know how to validate a date?

i started with just checking for the presence of a date but that does no validation at all. I'm using the datepickerfield which visualy gives me mm/dd/yyyy which is what I'm using the regex on but it doesn't validate that string.

eyepoker
31 Aug 2011, 1:54 PM
up.... anyone kow how to validate a date field? My guess is that there is some date object whose format i can't divine... ideally sencha validations would handle dates! Am i missing something, or is this a custom validation?

darthwes
31 Aug 2011, 4:39 PM
Whoa, what version of Sencha Touch?

And can show some more of your code , like a whole form object or config?

Sencha appears to have a Ext.Form.DatePicker object which should be what xtype you're using, right?

eyepoker
31 Aug 2011, 5:23 PM
well, yes i am using a date picker..... I've stripped out a lot to what applies to the question:



Ext.setup({
onReady: function(){


registrationForm = new Ext.form.FormPanel({
id:'registerForm',
scroll:'vertical',
html:'',
items:[{xtype:'fieldset',title:'CREATE NEW ACCOUNT',
items: [
{
xtype:'datepickerfield',
name:'dob',
label:'Date of Birth',
required:'true',
picker: {yearFrom:1950, yearTo:2011}
},
{
xtype:'button',
text:'Submit',
ui:'action',
scope:this,
handler: function(o,e){
submitRegForm(o,e);
}
}
] //end nested items
}]
});

Ext.regModel('afuser',{
fields: [
{name:'dob', type:'date'}
],
validations:[
{
type:'presence',
//type:'format',
name:'dob',
message:'Date of birth'
//matcher:/\d{2}\/\d{2}\/\d{4}/
}
]
});


var registrationFormModelInstance = Ext.ModelMgr.create({
dob:''
},'afuser');

var submitRegForm = function (obj,e){
var errorString = 'The following items are required:<br>';
registrationForm.updateRecord(registrationFormModelInstance,true);
var errors = registrationFormModelInstance.validate();
if (errors.isValid){
errors.each(
function (errorObj){
errorString += errorObj.message + '<br>';
}
);
Ext.Msg.alert('Errors in your input<br>' + errorString);
} else {
console.log('no errors');
}
}





new Ext.Panel({
fullscreen: true,
items:[registrationForm],
layout:'card'
});


}});


As you can see I'm using type:"presence" to validate dob but it always evaluates to true so is no good.

Then i tried doing a type:"format" which doesn't work either. you can see the matcher line commented out in the above example.

eyepoker
1 Sep 2011, 6:26 AM
i just corrected some errors - i had removed a bunch of code but didn't test. The code in the preceeding post is now a full working example.

you will see that "presence" on an xtype of datepickerfield doesn't work, and neither does "format".

sencha 1.1

darthwes
1 Sep 2011, 2:59 PM
Closer. You don't use the model as the model instance, you use model mgr to create a new instance from an empty config object. Then you get a record (a model instance). But that's mostly right.

The thing I run into is that the 'presence' validation doesn't seem to be coded correctly from what I can tell. Now, maybe I'm wrong, and I didn't respond last night in hopes that I was wrong and someone who knew better would help us both, but I suppose that's not happening...




/**
* Validates that the given value is present
* @param {Object} config Optional config object
* @param {Mixed} value The value to validate
* @return {Boolean} True if validation passed
*/
presence:function(config, value){
if(value ==undefined){
value = config;
}

return!!value;
},

So the problem here is that null is an unacceptable value, but will return true from presence, which I have no reason to believe is the desired effect. I think we should get some Sencha Touch Devs to help us with this. I assume they'll tell us that nulls are represented as '' (the empty string) and shouldn't return null.

This leaves you with a functional answer, just loop over the record's fields after you create the new record (see first comment, use the ModelMgr to create a new instance by passing an empty config object, and the name of the model, 'afuser') and set the nulls to empty strings, then call record.validate().

Lastly, you want to call out errors when its not valid so if (!errors.isValid) instead of if (errors.isValid) should fix that.

GL, let me know if that helps.

darthwes
1 Sep 2011, 3:28 PM
OK, I think I missed your updates, but no biggie, I just said what you've already apparently done. The thing your calling registrationFormModelInstance, we call "rec" or "record" usually.

Also, and again, FormPanel.updateRecord is returning null to you as dob. The 'presence' function (that I pasted earlier) is making a blatent error and changing the value object such that it returns true.

To fix, simply



if (!(registrationFormModelInstance.data.dob)) {
registrationFormModelInstance.data.dob = "";
}
var errors = registrationFormModelInstance.validate();
if (!errors.isValid()){
errors.each(
function (errorObj){
errorString += errorObj.message + '<br>';
}
);
Ext.Msg.alert('Errors in your input:' + errorString);
} else {
console.log('no errors');
}


And isValid is a function, and you wanna say if it's not valid, etc. That should get most of your answer.

You've got another issue with the breaking returns in your error message, but I'll let you play with that.

Hope that helped.

eyepoker
2 Sep 2011, 9:50 AM
makes sense and I've got things working - thanks for the help.

yoh.suzuki
27 Sep 2011, 9:55 PM
Here's a cleaner way to validate your date field. You can augment the singleton Ext.data.validations and write a new validator that makes sure it's a date.



Ext.apply(Ext.data.validations, {
isDateMessage: 'is not a date',
isDate: function(config, value) {
return Ext.isDate(value);
}
});

And here's what your model's validations configuration might look like:


{ type: 'isDate', field: 'dob' }

eyepoker
27 Sep 2011, 11:43 PM
Thanks for the followup, much appreciated!