Unobtrusive jquery validation with dynamic content in ASP.NET MVC

dynamicvalidation.html

@using (Html.BeginForm())
    {
    <div id="RegBox" style="display: none;">
        @Html.LabelFor(m => Model.Name)
        @Html.TextBoxFor(m => Model.Name)
        @Html.ValidationMessageFor(m => m.Name)
    </div>
    <div id="LoginBox">
        
        @Html.LabelFor(m => Model.Email)
        @Html.TextBoxFor(m => Model.Email)
        @Html.ValidationMessageFor(m => m.Email)

        @Html.LabelFor(m => Model.Password)
        @Html.PasswordFor(m => Model.Password)
        @Html.ValidationMessageFor(m => m.Password)
    </div>
        <input type="submit" value="Login" />
        or <a id="ToggleAuth" href="#">Sign Up</a>
    }

<script>

var regData = '';
function emptyReg()
{
    $('#RegBox').empty();
}

function regMode()
{
    $('#RegBox').html(regData).fadeIn();
}

function loginMode()
{
    $('#RegBox').fadeOut().empty();
}
$(function(){
   //store content of the registration specific data (with validation, etc)
    regData = $('#RegBox').html();
    //remove it, since only sign in will be displayed first
    emptyReg();

    $('#ToggleAuth').toggle(regMode, loginMode);
});
</script>