Ember - validations are not working when start the application on different page

Question

I have several views in my Ember application. One of my views in registration view. I define it with a template.
I am also using jquery validate plugin so that I can validate easily forms like the registration form.
In order to let the registration view work with validations, I added a js script that initialize validate on the registration form.
When I load my application directly to the registration view (myapp/index.html#/registration) the validations are initialized and working fine.
The problem is when I load the application into different page (myapp/index.html#/list for example) and then press the button the change the state to registration, then the validations are not working and sumbitting an empty form is possible.
For some reasons the registration validation initialize are not working when the first view that loaded is not the registration view.
Any idea why? How can I solve this?

EDIT: Here is some code
This is the View:

<script type="text/x-handlebars" data-template-name="registration">
        <form class="form-horizontal" id="registerForm">
            <fieldset>
                <legend>registration</legend>
                <div class="control-group">
                    <label class="control-label" for="user_name">User Name</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="user_name" name="user_name"/>
                    </div>
                </div>  
                <div class="control-group">
                    <label class="control-label" for="user_email">Email</label>
                    <div class="controls">
                        <input type="text" class="input-xlarge" id="user_email" name="user_email" title="Tooltip text"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="password">Password</label>
                    <div class="controls">
                        <input type="password" class="input-xlarge" id="password" name="password" title="Password tooltip"/>
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label" for="password_confirm">Password Confirmation</label>
                    <div class="controls">
                        <input type="password" class="input-xlarge" id="password_confirm" name="password_confirm" title="Confirmation tooltip">
                    </div>
                </div>
                <div class="control-group">
                    <label class="control-label"></label>
                    <div class="controls">
                        <button type="submit" class="btn btn-success">Create Account</button>
                    </div>
                </div>
            </fieldset>
        </form>
    </script>

This is initialization script for the registration view:

$(document).ready(function() {

    $("#registerForm input").tipsy({gravity: 'e'});

    // Validation
    $("#registerForm").validate({
        rules : {
            user_name : "required",
            user_email : {
                required : true,
                email : true
            },
            password : {
                required : true,
                minlength : 6
            },
            password_confirm : {
                required : true,
                equalTo : "#password"
            }
        },

        errorClass : "help-inline",
        errorElement : "span",
        highlight : function(element, errorClass, validClass) {
            $(element).parents('.control-group').removeClass('success');
            $(element).parents('.control-group').addClass('error');
        },
        unhighlight : function(element, errorClass, validClass) {
            $(element).parents('.control-group').removeClass('error');
            $(element).parents('.control-group').addClass('success');
        }
    });
}); 

This is app code relevant to registration:

App.RegistrationController = Em.Controller.extend();
App.RegistrationView = Em.View.extend({
    templateName: 'registration'
});
App.Router = Em.Router.extend({
    enableLogging: true,
    location: 'hash',

    root: Em.Route.extend({
        // EVENTS
        gotoList: Ember.Route.transitionTo('list'),
        gotoAbout: Ember.Route.transitionTo('about'),
        gotoPost: Ember.Route.transitionTo('post'),
        gotoRegistration: Ember.Route.transitionTo('registration'),

        // STATES
        index: Em.Route.extend({
            route: '/',
            redirectsTo: 'list'
        }),
        list: Em.Route.extend({
            route: '/list',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('list');
            }
        }),
        about: Em.Route.extend({
            route: '/about',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('about');
            }
        }),
        post: Em.Route.extend({
            route: '/post',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('post');
            }
        }),
        registration: Em.Route.extend({
            route: '/registration',
            connectOutlets: function(router, context) {
                router.get('applicationController').connectOutlet('registration');
            }
        })
    })
});

The problem is that when I surf to "#\list" and then go to registration, it looks like the registration initialization script didn't executed although I add reference to this script in my html. Any idea why?

Answer 1

At first sight, it seems that your validation script is executed when the dom is ready.

So, if you go first with /registration, the form is displayed, and when ready, the script works fine, because all form elements are present in the Dom.

But when you first enter with /list, it displays the list, then dom is ready, and your script is executed. But all the validation stuff searches for #registration, which is not on the page, an does nothing. Then when you switch to /registration, the script is not evaluated again (basically routing to a state is not like refreshing the page, but only update the dom).

I think if you write the validation code inside the didInsertElement function of the RegistrationView, then it should work.

App.RegistrationView = Em.View.extend({
  templateName: 'registration',

  didInsertElement: function () {
    this.$("#registerForm input").tipsy({gravity: 'e'});
    // Validation
    this.$("#registerForm").validate({
      rules : {
        user_name : "required",
        user_email : {
           required : true,
           email : true
        },
        password : {
           required : true,
           minlength : 6
        },
        password_confirm : {
           required : true,
           equalTo : "#password"
        }
      },

      errorClass : "help-inline",
      errorElement : "span",
      highlight : function(element, errorClass, validClass) {
        $(element).parents('.control-group').removeClass('success');
        $(element).parents('.control-group').addClass('error');
      },
      unhighlight : function(element, errorClass, validClass) {
        $(element).parents('.control-group').removeClass('error');
        $(element).parents('.control-group').addClass('success');
      }
    });
  }
});

Update: here is an almost working jsfiddle. Almost working, because I don't know exactly how does jquery-validation work. But the validation code is executed. http://jsfiddle.net/Sly7/3JhzM/