Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

Validation on forms using JS

Go to End

13 Posts   2639 Views


7 July 2009 at 9:29pm Community Member, 8 Posts

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?



7 July 2009 at 10:27pm Community Member, 30 Posts


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:
But you must make sure to put it behind the validator.js...

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




7 July 2009 at 11:43pm Community Member, 8 Posts

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;
      //$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(



7 July 2009 at 11:49pm Community Member, 30 Posts

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

And somewhere in the constructor you need:





7 July 2009 at 11:59pm Community Member, 8 Posts

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.



8 July 2009 at 12:18am Community Member, 30 Posts

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


8 July 2009 at 1:19am Community Member, 8 Posts

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



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.


8 July 2009 at 1:29am (Last edited: 8 July 2009 6:22pm), Community Member, 30 Posts

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

Install Firebug:
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.

Go to Top