[Solved] Upload Control within tabstrip doesn't validate

[David Brenchley]

I have a upload control within a dynamic tabstrip.  The user should not be able to submit the form without a file selected.  This works fine if the form and upload control is not in the tab control.  Any ideas on what I'm doing wrong?

TabControl

@{ Html.Telerik().TabStrip()
            .Name("TabStrip")
            .Effects(fx => fx.Expand()
                .Opacity()
                .OpenDuration(200)
                .CloseDuration(300)
            )
            .BindTo((List<CmsWeb.Models.NavigationData>)ViewData["tabStripData"],
                (item, navData) => {
                    item.Text = navData.Text;

                    item.ContentUrl = navData.NavigateUrl;
            })
            .SelectedIndex(0)
            .Render();
}

From the page within the tabcontrol

    <script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftAjax.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/MicrosoftMvcAjax.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>

@using (Html.BeginForm("CreateChild", "PDFDetail", FormMethod.Post, new { id = "uploadForm", enctype = "multipart/form-data" })) {
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>Details</legend>

        @Html.Partial("_CreateOrEdit", Model)

        <div class="editor-label">
            PDF File
        </div>
        <div class="editor-field">

        @(Html.Telerik().Upload()
            .Name("attachments")
            .Multiple(false)
        )
        </div>

        <p>
            <input type="submit" value="Create"  class="t-button"  />
        </p>
    </fieldset>

<script type="text/javascript">
    $(document).ready(function() {
        $("#uploadForm").validate({
            rules: {
                attachments: {
                    required: true
                }
            },
            messages: {
                attachments: {
                    required: "Attachment required"
                }
            }
        });
    });
</script>

}

[Daniel]

Hi David,

 
The client-side validation isn't working in the TabStrip because the Tab's content is loaded via Ajax. Please check the Common Validation Problems code library for information and example on how to enable the client-side validation when loading the form with Ajax.

All the best,
Daniel
the Telerik team

[David Brenchley]

Daniel,
That helps with my other validation, but it still doesn't work for the upload control.  I've modified the InsertUser.cshtml file in your attached project to below, and it still doesn't work.

@model User

@using (Html.BeginForm())
{
    @Html.EditorForModel()

   // Forms loaded via Ajax have to be parsed manually with the validator
    @(Html.Telerik().Upload()
    .Name("attachments")
    .Multiple(false)
)
    <p>Test</p>
    <script type="text/javascript">
    $(document).ready(function () {
        $("#uploadForm").validate({
            rules: {
                attachments: {
                    required: true
                }
            },
            messages: {
                attachments: {
                    required: "Attachment required"
                }
            }
        });
    });
    </script>

    <input type="submit" value="Save" />
}

[David Brenchley]

Nevermind, I got it working.  I needed to add to the BeginForm the htmlAttribute id="uploadeForm".