Jump to:

23471 Posts in 18941 Topics by 2878 members

General Questions

SilverStripe Forums » General Questions » Custom Jquery Validation in SS3

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
Go to End
Author Topic: 1277 Views
  • Optic Blaze
    Avatar
    Community Member
    162 Posts

    Custom Jquery Validation in SS3 Link to this post

    Hi there,

    I am building a site that needs some custom Jquery validation. I am looking for optimal way to implement it in my project. I came across a article in ss bits that looks like it is perfect for my needs, but i cant get it to work in SS3. http://www.ssbits.com/tutorials/2009/using-jquery-for-form-validation/

    Essentially you load in the jquery 'validate' plugin and then just add the following code to the init function in the page controller. But i cant get it to work. Any thoughts would be appreciated.

    I have tried disabling validation by using ' Validator::set_javascript_validation_handler('none');' to do so, but i get the following error:

    [User Deprecated] Validator::set_javascript_validation_handler is deprecated. Use custom javascript validation instead.

    <b>The validation code looks like this: </b>

    Requirements::customScript('
    jQuery(document).ready(function() {
                      
                                  
    jQuery("#Form_CustomerForm").validate({
                
    rules: {
    Email: {
    required: true,
    email: true
    },
    Tel1: {
    required: true,
    minlength: 10,
                      maxlength: 10
    }
    },
    messages: {
    Email: "It is quite important that you give me your actual email address so I can send you messages",
                   Tel1: "The phone number is wrong"
    }
    });
    });
    ');

  • IOTI
    Avatar
    Community Member
    189 Posts

    Re: Custom Jquery Validation in SS3 Link to this post

    are you ensuring that jquery and jquery validation plugin are both being loaded, and before your customScript?

    any js errors in your console on the page with the form?

    Lastly, I believe SS3 no longer includes custom js validation so there is no need to disable it.

  • Optic Blaze
    Avatar
    Community Member
    162 Posts

    Re: Custom Jquery Validation in SS3 Link to this post

    Hi there,

    Thanks for the reply.

    1) It turns out you are right, i did not have to disable it
    2) I had to block the jquery file that ss3 loads automatically from the framework/thirdparty folder
    3) Then i added in my own jquery 1.7.1 library
    4) Then it worked

    I got the latest jquery validation files from here: https://github.com/jzaefferer/jquery-validation

    <b> It now looks like this: </b>

    public function init() {   
          parent::init();
       //Block old jquery from framework
       Requirements::block('framework/thirdparty/jquery/jquery.js');
       Requirements::javascript('jobtracker/js/jquery.validate.min.js');

    Requirements::customScript('
    jQuery(document).ready(function() {
    jQuery("#Form_CustomerAdd").validate({
    rules: {
    Name: "required",
                   Surname: "required",
                   StreetAddress: "required",
    Email: {
    required: false,
    email: true
    },
                   Tel1: {
                      required: true,
                      number: true,
                      maxlenth:10,
                      minlength:10
                   },
                   Tel2: {
                      required:false,
                      number: true,
                   },
                   Tel3: {
                      required:false,
                      number: true,
                   },
                   Fax: {
                      required:false,
                      number: true,
                   },
                   DateJoined: {
                      required: true,
                      date: true
                   },
                   PostalCode: {
                      required: true,
                      number: true,
                      maxlenth:4,
                      minlength:4
                   },               
    },
    messages: {
                   Tel1: "This field is required, only uses numbers and must have 10 digits",
    Email: "Please provide a valid email address"
    }
    });
    });
    ');
          
    }

    1277 Views
Page: 1
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.