Create form from partial view in jQuery dialog what validates input with AJAX

I have read some posts about how to do this, but cannot get it all together.

I have my model:

   public class Period
   {
       [Required]
       [DataType(DataType.DateTime)]
       [Display(Name = "Start")]
       public DateTime Start { get; set; }

       [Required]
       [DataType(DataType.DateTime)]
       [Display(Name = "End")]       
       public DateTime End { get; set; }

   }

My controller

    public ActionResult Test()
    {

        return PartialView();
    }
    [HttpPost]
    public ActionResult Test(Period model)
    {
        if(model.IsValid){
           return RedirectToAction("Report", model)
        }
        return PartialView(model);
    }

And partial view

 @model Period

<a onclick="openRequestOrderReportForm()" class="" role="button" aria-disabled="false">Report</a>

<div id="dRequestOrderReport">

@using (Ajax.BeginForm("Test", "Reports", null, new AjaxOptions { UpdateTargetId = "dRequestOrderReport" }, new { id = "RequestOrderReportForm" }))
{
    @Html.EditorFor(m => Model)
}
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("#dRequestOrderReport").dialog({
            modal: true,
            autoOpen: false,
            title:'title',
            buttons: {
                "Go": function () {
                    $("#RequestOrderReportForm").submit();
                },
                Cancel: function () {
                    $(this).dialog("close");
                }
            }
        });
    });
    function openRequestOrderReportForm()
    {
        $("#dRequestOrderReport").dialog("open");
    }
</script>

I need to be able validate input - if it is not valid, then form must stay open, if it is valid entire page must go to other action.

closest to do what I want is jQuery Modal Dialogs and MVC3 Partial Views, but I cannot get it working.