Re: [backbonejs] using backbone with jquery.validate plugin

I cannot make this work....

Here is what I tried....first of all I inserted the validate method inside the model.exactly as depicted in the example in the manual.

What happens is that validation is triggered on page refresh for the data coming from the server.

Secondly,in the manual is stated that validate is called before save....I did not noticed such thing.

lastly,as I said,I want the validation to take place and just check if the user has filled an input box,and display an error message if not.

Here is the jsbin.

Click in the calendar on the output pane to see the dialog box I am talking about....the input box I am referring to,is named title.

Kostas Kitmanov έγραψε:

Using jQuery plugins (and especially jquery.validate) with Backbone is not something I'd personally recommend. First of all, in Backbone validation supposed to take place in models, because only models should know which combinations of values are correct. Sometimes just overriding validate method in your model is enough (when model is simple and validation is just few if's). Second, I'd recommend to take a look at Backbone plugins (there are plenty for validation), they fit into Backbone-based code much better (meaning they leave your code still following Backbone idioms, more concise and maintainable).

On 27 October 2014 19:10, Dimitris Papageorgiou<foryo...@gmail.com> wrote:

I am trying to use backbone with jquery validate.

The code is this:

  save: function(fcEvent) {

            

          $('#check').validate({//jquery validate plugin code

          submitHandler: function(form) {//http://jqueryvalidation.org/category/plugin/#submithandler

       

           

            this.model.set({'title': this.$('#title').val(),'color':this.$('#color').val()});

            if (this.model.isNew()) {

                this.collection.create(this.model, {success: this.close});

            } else {

                this.model.save({}, {success: this.close});

            }

       

          },

          rules:{title:"required"},

          messages:{title:"You have to put a name sir"}

           

         });

         

        },.

The above function is called when the OK button of a dialog box is clicked....take a look....at var buttons :

   render: function()   {

            

            var buttons = {'Ok': this.save};//OK button of dialog box

                if (!this.model.isNew()) {

                _.extend(buttons, {'Διαγραφή': this.destroy});

            }          

           

            _.extend(buttons, {'Ακύρωση': this.close});            

            this.el.dialog({

                modal: true,

                title: (this.model.isNew() ? 'Νέο ' : 'Επεξεργασία') + ' Ραντεβού',

                buttons: buttons,

                open: this.open,

                width: 500,

                close: function( event, ui ) 

                {

                $('#services').val('').trigger('chosen:updated');

                $( "#from" ).replaceWith("<select id='timesfrom'></select>");

                $( "#till" ).replaceWith("<select id='timestill'></select>");

               

                }

            

            });

             

            return this;

        }, 

While the save function runs...the submit handler which is a jquery.validate function never does.

#check is the id of the form.

Validation does not takes place.

Any thoughts on the issue?

P.S I am preparing a jsbin demo-although this should have come first...SORRY.

https://cdn.rawgit.com/shinetech/BackboneJsAndFullCalendar/master/public/javascripts/backbone.js:

//     Backbone.js 0.5.1

That is one incredibly old Backbone. No wonder is doesn't work.

http://jsbin.com/hidafitaro/1/edit?js,output

Please, try to use fresh versions, nobody wants to spend their time digging in bugs and idiosyncrasies solved long ago. 

Hello Dimitris. I have been using the jquery.validate plugin for all of my projects. It is the only validation library that I use.

I don't do validation on the models, I do it on the form. This is what this plugin is good for. It also implies tha that you need to have a <form> and a <button type="submit"> on it for it to work. Othewise the "submit" event will not trigger.

Thanks for the help...the problem now is I cannot make the new version work.

The console displays an error at this line of code:

if (protoProps && _.has(protoProps, 'constructor')) {

      child = protoProps.constructor;

    } else {

      child = function(){ return parent.apply(this, arguments); };

    }

My app is currently non-functional.No calendar shown.

 jsbin snippet i provided was working. The only changes was this.el replaced by this.$el and _.bindAll now needs to receive function names explicitly.

Code you quoted is library code. You should follow stack trace until you reach your code; this is where the roots of error. Also you didn't specify the error. 

Yes.the jsbin you gave me works...I have eliminated all errors,updated all files....but still, in my local machine validate function never gets called.

And the worst part is I do not get any error message in chrome dev tools console.

I do not know what to try next...I am still investigating.

You can add breakpoints in chrome dev tools and see where your normal flow gets wrong direction.

Also did you notice that you need to pass {validate: true} to .set in order to validation to fire?

            this.model.set({

                'title': this.$('#title').val(),

                'color': this.$('#color').val()

            }, {validate: true}); 

Yes...you were right,code was missing,plus the fact that breakpoints had to be set, to observe the flow(I had done that earlier but more of them were needed).

Nonetheless using validate() does not solve some issues that jquery validate can.

With jquery validate though a  message was displayed right beside the input element....I can do that with the validate function too, by writing some custom code.....with jquery validate though no custom code needed.

What do you propose?Ok, jquery validate is not the best option in using it with backbone.

Is the solution writing some custom code inside the validate function? 

I just want to hear your opinion. 

Take a look at Backbone plugins, I'm sure there are nice ones.

I found this plugin....for the time being I have some problems making it work,but I will make a different topic about it.