Jump to:

22972 Posts in 11596 Topics by 2824 members

General Questions

SilverStripe Forums » General Questions » Validation on forms using JS

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

Page: 1 2
Go to End
Author Topic: 2479 Views
  • Elemental
    Avatar
    Community Member
    8 Posts

    Validation on forms using JS Link to this post

    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

  • brokemeister
    Avatar
    Community Member
    30 Posts

    Re: Validation on forms using JS Link to this post

    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

  • Elemental
    Avatar
    Community Member
    8 Posts

    Re: Validation on forms using JS Link to this post

    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

  • brokemeister
    Avatar
    Community Member
    30 Posts

    Re: Validation on forms using JS Link to this post

    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

  • Elemental
    Avatar
    Community Member
    8 Posts

    Re: Validation on forms using JS Link to this post

    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

  • brokemeister
    Avatar
    Community Member
    30 Posts

    Re: Validation on forms using JS Link to this post

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

  • Elemental
    Avatar
    Community Member
    8 Posts

    Re: Validation on forms using JS Link to this post

    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.

  • brokemeister
    Avatar
    Community Member
    30 Posts

    Re: Validation on forms using JS Link to this post

    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.

    2479 Views
Page: 1 2
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.