This is a migrated thread and some comments may be shown as answers.

Form Client side validation in Telerik Model model Window (with Models having validation attribute)

6 Answers 118 Views
Window
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Narayanarao
Top achievements
Rank 1
Narayanarao asked on 16 Dec 2011, 07:57 AM
Hi telerik team,

I have tried numerous countless attempts to have a working validation on model popup window but in vain. I can see that in the html rendered the validation message appears, but never fire for that intended control on entering invalid data.

The model(s) are decorated with validation attributes and then bound onto the textfor and validationfor controls on view.

all of the below are tried. Please find inline the code of the model window.

1.  adding
<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/MicrosoftMvcValidation.js")" type="text/javascript"></script>

2.
@{ Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
        .Add("MicrosoftAjax.js")
                     .Add("MicrosoftMvcValidation.js"))

3. adding this to model window form as well as at view beginning
@{ Html.EnableClientValidation(); }

-- DELETED SNIPPET --
Thanks.

6 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 19 Dec 2011, 03:22 PM
Hi Narayanarao,


To use client-side form validation you should include three JavaScript files to the head section of your page:
  1. jquery-1.6.4.min.js
  2. jquery.validate.min.js
  3. jquery.validate.unobtrusive.min.js
You should also prevent the Telerik ScriptRegistrar method from including jQuery and jquey.validate. For example:
Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(false)


Best wishes,
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
Michael Dosen
Top achievements
Rank 1
answered on 01 Feb 2012, 05:54 PM
Thank you for your help! that was exactly what I needed...
0
Steven
Top achievements
Rank 1
answered on 16 Mar 2012, 08:57 PM
Hello,

I have tried everything specified above and it still does not work.  When I use the following for ScriptRegistrar and look at the html, it is still including jquery.validate.min.js.
@(Html.Telerik().ScriptRegistrar().jQuery(false).jQueryValidation(false)
    .DefaultGroup(group => group
        .Compress(true))
)

I am including the following script files and Html.EnableClientValidation() in my view.
<script src="@Url.Content("http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.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/MicrosoftMvcValidation.js")" type="text/javascript"></script>
The window is defined as follows:
@(Html.Telerik().Window()
    .Name("Details")
    .Visible(false)
    .Title("User Details")
    .Modal(true)
    .Buttons(buttons => buttons.Close())
    .Scrollable(false)
    .ClientEvents(events => events
        .OnActivate("onActivate"))
)
And is opened using javascript when a button is pressed.
function viewDetails(userId) {
        $.ajax({
            type: 'POST',
            url: '/User/ViewDetails',
            data: { userId: userId },
            dataType: 'html',
            success: function (htmlData)
            {
                var detailWindow = $("#Details").data("tWindow");
                detailWindow.content(htmlData);
                detailWindow.center().open();
            },
            error: function () {
                alert("Error loading User Details");
            }
        })
    }
Any ideas how to get validation to work? It will work fine outside the window so I know I have the correct js files included. Thank You
0
Daniel
Telerik team
answered on 20 Mar 2012, 01:20 PM
Hello Steven,

Please check the Common Validation Problems code library for information and example on how to enable validation for forms loaded with Ajax.

Greetings,
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
Steven
Top achievements
Rank 1
answered on 20 Mar 2012, 04:27 PM
Thank you.  I checked that out but it still doesn't work.  I added the client events to my tabstrip but the onContentLoad is never called.  Is this my problem?

@using (Html.BeginForm("SubmitUser", "User", FormMethod.Post, new { user = "user-form", name = "SubmitUser" }))
{  
    @Html.ValidationSummary()
     
    @(Html.Telerik().TabStrip()
        .Name("UserTabStrip")
        .SelectedIndex(0)
        .ClientEvents(events => events.OnContentLoad("onContentLoad"))
        .HtmlAttributes(new { style = "width:920px" })      
        .Items(items =>
        {

<script type="text/javascript">
    function submitDetails(userId) {
        $.ajax({
            type: 'POST',
            url: '/User/ViewDetails',
            data: { userId: userId },
            dataType: 'html',
            success: function (htmlData) {
                $.validator.unobtrusive.parse(e.contentElement);
                var detailWindow = $("#Details").data("tWindow");
                detailWindow.content(htmlData);
                detailWindow.center().open();
            }
        })
    }
 
    function onCancelDetails() {
        alert("onCancelDetails");
        var detailWindow = $("#Details").data("tWindow");
        detailWindow.close();
    }
 
    function onSubmitUser() {
        var tabStrip = $("#UserTabStrip").data("tTabStrip");
        tabStrip.select($(".t-item", tabStrip.element)[0]);
    }
 
    function onContentLoad(e) {
        alert("onContentLoad");
        $.validator.unobtrusive.parse(e.contentElement);
    }
 </script>
0
Daniel
Telerik team
answered on 23 Mar 2012, 11:07 AM
Hello again Steven,

I am not sure if I understand the exact scenario. Could you clarify? Are the tab's loaded on demand or their content is rendered on the server? Is the form loaded in the Window or in a tab? Are there editable Grid's on the page?
If the form is loaded in the Window via an Ajax request, you should use the parse method on the content wrapper after you set the content e.g.
$.ajax({
    type: 'POST',
    url: '/User/ViewDetails',
    data: { userId: userId },
    dataType: 'html',
    success: function (htmlData) {
        var detailWindow = $("#Details").data("tWindow");      
        detailWindow.content(htmlData);
        $.validator.unobtrusive.parse($(detailWindow.element).find('.t-window-content'));
        detailWindow.center().open();
    }
})


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.
Tags
Window
Asked by
Narayanarao
Top achievements
Rank 1
Answers by
Daniel
Telerik team
Michael Dosen
Top achievements
Rank 1
Steven
Top achievements
Rank 1
Share this question
or