3
\$\begingroup\$

I am using Backbone Marionette - I would like to set the user name and password if that passes the model validation method.

I am highly confused with that. Please show me a handy approach or correct me if I'm doing this wrong.

define(["backbone"], function(Backbone){
    var LoginModel = Backbone.Model.extend({
        defaults:{
                userName:'',
                password:''
        },
        validate:function(attr, options){
            if (!attr.userName) {
                return 'I need your userName';
              }
              if (!attr.password) {
                return 'I need your password';
              }
        },
        initialize:function(){
            this.on("invalid", function(model, error){
                console.log(model, error); // error consoles 2 times (4 times for both)
            });
        }
    });

    return LoginModel;
});

View.js:

define([
    'jQuery','underscore',
    'backbone','marionette',
    'text!./templates/loginView.html'],
    function($,_,Backbone,Marionette,template){
        "use strict";

        var LoginView = Backbone.Marionette.ItemView.extend({

            className:'col-xs-12 col-md-4 col-md-offset-4',

            template:_.template(template),

            events:{
                "submit form" : "loginSubmit"
            },

            loginSubmit:function(e){
                e.preventDefault();
                var data = Backbone.Syphon.serialize(e.target),

                validUser = this.model.set('userName',data.userName, {validate: true}),
                validPass = this.model.set('password', data.password,{validate: true});

                if(!validUser){
                    $(e.target).find('#userName').select();
                } else{
                    $(e.target).find('#userName').next(':input').select();
                }

                if(!validPass){
                    $(e.target).find('#userName').select();
                }

            }

        });

        return LoginView;
    }
);

This works, but I am looking for the best approach.

\$\endgroup\$
1
\$\begingroup\$

I'm not very familiar with Backbone, however I do have a couple of comments:

  • To simplify your life, check out Marionette Forms. It can handle quick validation of forms. This is an alternative to Backbone Forms, which is generally more demanding in terms of code needed.

  • The following snippet:

    if(!validUser){
        $(e.target).find('#userName').select();
    } else{
        $(e.target).find('#userName').next(':input').select();
    }
    
    if(!validPass){
        $(e.target).find('#userName').select();
    }
    

    could simply be:

    if (validUser && validPass) {
        $(e.target).find('#userName').next(':input').select();
    } else {
        $(e.target).find('#userName').select();
    }
    
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.