Adding jQuery Validation to Jetstrap via Javascript

202 Views Asked by At

As of right, now Jetstrap doesn't include jquery.validate as a plugin.
I know they're already working on a feature for users add external JS/CSS, but in the mean time I'd like to find a temporary fix.

I've tried to import from a hosted source dynamically by using a few scripts, but none of my approaches have worked so far.

Example (yes, crude but..):

(function(){
  var newscript = document.createElement('script');
     newscript.type = 'text/javascript';
     newscript.async = true;
     newscript.src = 'http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js';
     (document.getElementsByTagName('head')[0]||document.getElementsByTagName('body')[0]).appendChild(newscript);
})();



Max, one of the creators of Jetstrap posted on Stack 2 days ago about loading scripts dynamically, but his solution for datepicker, and they don't exactly work the same way...

Here's his example:

$(function() {
    $.getScript('//cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.0.2/js/bootstrap-datepicker.min.js', function() {
       $('.datepicker').datepicker();
    });
})


Any creativeness I've had today to deal with problems has dried up, so does anyone have any advice on how to solve this?

Thanks

1

There are 1 best solutions below

1
On BEST ANSWER

Ohgodwhy's suggestion worked, here's my final code, please use it if you'd like to do the same on Jetstrap:

$(document).ready(function() {
    $.getScript('http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js', function() {
        $("#RegistrationForm").validate({
            rules: { 
            "data[User][email]": {
                email: true,
                required: true,
                minlength: 5,
                maxlength: 50
            },
            "data[User][password]": { 
                required: true, 
                minlength: 8,
                mypassword : true
            }, 
            "data[User][confirm_password]": {
                required: true,
                equalTo: '#UserPassword'
            } 
        }, 
        highlight: function(element) {
            $(element).closest('.control-group').removeClass('success').addClass('error');
        },
        success: function(element) {
            element
            .text('OK').addClass('valid')
            .closest('.control-group').removeClass('error').addClass('success');
        }
    });
});
})