This is a migrated thread and some comments may be shown as answers.
Upload Control within tabstrip doesn't validate
3 Answers 24 Views
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
David Brenchley
Top achievements
Rank 1
David Brenchley asked on 25 Apr 2012, 06:39 PM
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>
     
}

3 Answers, 1 is accepted

Sort by
0
Accepted
Daniel
Telerik team
answered on 30 Apr 2012, 11:46 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the Telerik Extensions for ASP.MET MVC, subscribe to their blog feed now.
0
David Brenchley
Top achievements
Rank 1
answered on 30 Apr 2012, 06:22 PM
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" />
}
0
David Brenchley
Top achievements
Rank 1
answered on 30 Apr 2012, 06:57 PM
Nevermind, I got it working.  I needed to add to the BeginForm the htmlAttribute id="uploadeForm".
Tags
Upload
Asked by
David Brenchley
Top achievements
Rank 1
Answers by
Daniel
Telerik team
David Brenchley
Top achievements
Rank 1
Share this question
or