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
Reply


13 Posts   2779 Views

Avatar
Elemental

Community Member, 8 Posts

7 July 2009 at 9:29pm

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

Avatar
brokemeister

Community Member, 30 Posts

7 July 2009 at 10:27pm

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

Avatar
Elemental

Community Member, 8 Posts

7 July 2009 at 11:43pm

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

Avatar
brokemeister

Community Member, 30 Posts

7 July 2009 at 11:49pm

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

Avatar
Elemental

Community Member, 8 Posts

7 July 2009 at 11:59pm

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

Avatar
brokemeister

Community Member, 30 Posts

8 July 2009 at 12:18am

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

Avatar
Elemental

Community Member, 8 Posts

8 July 2009 at 1:19am

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.

Avatar
brokemeister

Community Member, 30 Posts

8 July 2009 at 1:29am

Edited: 08/07/2009 6:22pm

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.

Go to Top