jquery updateTips method not working when div is on seperate page to the method? ASP.net mvc2

I am trying to add Client-side validation to a jquery dialog which loads an independant aspx page dynamically.

I am using the tutorial given for the modal form in jquery-ui http://jqueryui.com/demos/dialog/#modal-form

Putting the entire tutorial into the Site.Master (script and html dialog form) the tutorial works and displays errors if validation rules aren't satisfied.

However, when I "cut"/move the form into a seperate aspx page and change the dialog so it loads the contents dynamically from a specific page the updateTips method doesn't work

var tips = $(".validateTips");

      function updateTips(t) {

                tips
                    .text(t)
                    .addClass("ui-state-highlight");
                setTimeout(function() {
                   tips.removeClass("ui-state-highlight", 1500);
                }, 500);
            }

All I've done is move the form into a separate page

<div id="dialog-form" title="Create new user">
    <p class="validateTips">All form fields are required.</p>

    <form>
    <fieldset>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
        <label for="email">Email</label>
        <input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
        <label for="password">Password</label>
        <input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
    </fieldset>
    </form>


</div>
开发者_开发技巧

So to summarize when everything is in Site.Master the following code runs perfectly

function checkLength(o, n, min, max) {
            if (o.val().length > max || o.val().length < min) {
                o.addClass("ui-state-error");
                updateTips("<p>Length of " + n + " must be between " +
                    min + " and " + max + "."+"</p>");
                return false;
            } else {
                return true;
            }
        }
bValid = bValid && checkLength(name, "username", 3, 16);

i.e. "All form fields required" changes to

Length of username must be between 3 and 16."

Whereas when they are separated it sticks as "All form fields required" and just shows css thanks to the ui-state-error class on relevant field

Can anyone help

Thank you

Is the line

var tips = $(".validateTips");

in the page load function on your master page? if so then the problem is that the p element with a class of .validateTips does not exist at the time you are setting up the "tips" variable if you move it to a separate page. the following would be one way of fixing this.

function updateTips(t) {
    $(".validateTips").text(t);
    $(".validateTips").addClass("ui-state-highlight");
    setTimeout(function () {
        $(".validateTips").removeClass("ui-state-highlight", 1500);
    }, 500);    
}

You could also set the "tips" variable after you load your secondary form.

Hope this helps.