Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Window > Form Client side validation in Telerik Model model Window (with Models having validation attribute)

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

Feed from this thread
  • Narayanarao avatar

    Posted on Dec 16, 2011 (permalink)

    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.

    Reply

  • Daniel Daniel admin's avatar

    Posted on Dec 19, 2011 (permalink)

    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

    Reply

  • Naoual Ettachfini avatar

    Posted on Feb 1, 2012 (permalink)

    Thank you for your help! that was exactly what I needed...

    Reply

  • Steven avatar

    Posted on Mar 16, 2012 (permalink)

    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

    Reply

  • Daniel Daniel admin's avatar

    Posted on Mar 20, 2012 (permalink)

    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.

    Reply

  • Steven avatar

    Posted on Mar 20, 2012 (permalink)

    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>

    Reply

  • Daniel Daniel admin's avatar

    Posted on Mar 23, 2012 (permalink)

    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.

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / Telerik MVC Extensions (superseded) > Window > Form Client side validation in Telerik Model model Window (with Models having validation attribute)
Related resources for "Form Client side validation in Telerik Model model Window (with Models having validation attribute)"

[  ASP.NET MVC Window Features  |  Documentation  |  Demos  |  Telerik TV ]