Hi all.

We have created a site in SS and now we are having problems with displaying the validation.

So we have a form with many fields. When the user leaves the field, there is JS validation. If the field is incorrectly entered, it shows an ugly message below the field, "Please fill out "this", it is required.".

We actually don't want the error message to show but rather that the label change colour to RED for example.

I see that the JS validation occurs in the sapphire/javascript/validator.js file but it seems to get that to work is almost like hacking the complete script.

Is there anyway we can do different validation as mentioned above and also why does the error message say "this" instead of the field name?

Should we be creating our own JS validation file? if so, how and where?

thanks
angelo

Hi!

I haven't test it for silverstripe, but it's working with another CMS.
So it should work simular.

You just have to replace following function of sapphire/javascript/validator.js: "validationError".
So you can create your JS-File with this function. Basically you can copy it. You just need to modify the last two lines of the old function...
Than you just need to include it to your template.
I'm not sure in which PHP-Controller you must put following line:
Requirements::javascript('yourscript.js');
But you must make sure to put it behind the validator.js...

Please post the code, if you have something...

Cheers,

Malte

thanks for the reply.

But where do I create this new JS file and where exactly do I call it in my form?

here is my code to create the form:

class DOBForm extends Form {
// constructor
function __construct($controller, $name) {
// variables
$year = (int)date("Y");
$expiry = $year - 111; // maximum age = 110
// date arrays
$days = array();
for ($i = 1; $i < 32; $i++) {
$days[$i] = str_pad("$i", 2, '0', STR_PAD_LEFT);
}
$months = array(
1 => 'Jan',
2 => 'Feb',
3 => 'Mar',
4 => 'Apr',
5 => 'May',
6 => 'Jun',
7 => 'Jul',
8 => 'Aug',
9 => 'Sep',
10 => 'Oct',
11 => 'Nov',
12 => 'Dec'
);
$years = array();
for ($i = $year; $i > $expiry; $i--) {
$years[$i] = "$i";
}
// dropdown array
$locales = DataObject::get('Locale');
$dropdown = array();
foreach ($locales as $locale) {
$dropdown[$locale->ISO] = $locale->Name;
}
asort($dropdown);
//$bubble = array('0' => 'Please select...');
//$dropdown = array_merge($bubble, $dropdown);

$fields = new FieldSet(
// @TODO make locale dynamic
new DropdownField('Locale', null, $dropdown, 'UK'), // international
new DropdownField('DOB_day', null, $days, date("d")),
new DropdownField('DOB_month', null, $months, date("m")),
new DropdownField('DOB_year', null, $years, date("Y"))
);
//
$actions = new FieldSet(
new FormAction('EnterFlash', 'ENTER FLASH SITE')
);
//
parent::__construct($controller, $name, $fields, $actions);
}
//
function forTemplate() {
return $this->renderWith(
array(
$this->class,
'Form'
)
);
}
}

thanks
Elemental
http://www.elemental.co.za

You can put the JS-File in mysite/javascript/ValidatorExtension.js

And somewhere in the constructor you need:

Requirements::javascript('mysite/javascript/ValidatorExtension.js');

Cheers,

Malte

Hi Malte,

thanks for the prompt reply.

I have done as you have said but it still calls the function in the Validator.js file in sapphire directory and not the newly created javascript file.

Must I do something to the original validator.js file? or how do I force it to work with the new function?

I have flush=1 as well to ensure no caching is occuring.

thanks
Elemental

Have you check the order of the javascript inclusions?
Trace the function down with Firebug.

Is there anywhere specific where this line has to go in the constructor:

Requirements::javascript('mysite/javascript/ValidatorExtension.js');

?

It seems that my JS file is being loaded before the Sapphire JS file. How can I track which function is being called in Firebug?

thanks again.

I'm not so deep into the details of the order of JS, per haps somebody else could help...

Install Firebug: https://addons.mozilla.org/de/firefox/addon/1843
1. Select a skript and set a stopping point
2. Do your action (reload or send button)
Firefox should stopp at your point, if it's running trough this line.