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

Custom Jquery Validation in SS3


Reply

3 Posts   1310 Views

Avatar
Optic Blaze

21 January 2013 at 5:12am (Last edited: 21 January 2013 5:19am), Community Member, 162 Posts

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"
}
});
});
');

Avatar
IOTI

22 January 2013 at 1:50am Community Member, 189 Posts

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.

Avatar
Optic Blaze

22 January 2013 at 2:20am Community Member, 162 Posts

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"
}
});
});
');
      
}