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.

We've moved the forum!

Please use forum.silverstripe.org for any new questions (announcement).
The forum archive will stick around, but will be read only.

You can also use our Slack channel or StackOverflow to ask for help.
Check out our community overview for more options to contribute.

General Questions /

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

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

Custom Jquery Validation in SS3


Go to End


3 Posts   2478 Views

Avatar
Optic Blaze

Community Member, 190 Posts

21 January 2013 at 5:12am

Edited: 21/01/2013 5:19am

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
copernican

Community Member, 189 Posts

22 January 2013 at 1:50am

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

Community Member, 190 Posts

22 January 2013 at 2:20am

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

}