CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-4kendo-uijquery-validate
ataravati
ataravati

Reputation: 9145

asp.net mvc remote validation in a Kendo window in IE

I have a Kendo Window in which the user enters a Name. I'm using Remote Validation to check if the name exists in the database and submit the form only if the Name does not exist.

I'm using jQuery Validation Plugin v1.10.0. The same remote validation action is used in a normal view without any problem. But, in the Kendo Window (Partial View), I have these issues:

1) Remote validation does not fire on form submit. It only works on key up event, and on focus out. This happens both in IE (IE 8) and in Chrome.

2) In IE (IE 8), the validation only fires on key up, and only when I hit a space after the name. So, let's say the name 'John' is not valid. I will not get the validation message when I type 'John', but when I hit space after 'John'. Also, remote validation does not fire when I use backspace.

Any idea as to what is causing this issue?

ViewModel:

public class MyViewModel
{
    public int ID { get; set; }
    [Required]
    [Remote("IsNameAvailable", "MyController", ErrorMessage = "The Name already exists.")]
    public string Name { get; set; }
}

Controller:

public ActionResult IsNameAvailable(Portfolio portfolio)
{
    var exists = // code to check if Name exists;

    return Json(!exists, JsonRequestBehavior.AllowGet);
}

public ActionResult ShowDialog(int id)
{
    var viewModel = new MyViewModel { ID = id };

    return PartialView("_Dialog", viewModel);                    
}

Partial View (to be rendered in a Kendo Window):

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

    @Html.HiddenFor(model => model.ID)

    <div class="editor-label">
        @Html.LabelFor(model => model.Name)
    </div>
    <div class="editor-field">
        @Html.TextBoxFor(model => model.Name)            
    </div>
    <div class="editor-field">
        @Html.ValidationMessageFor(model => model.Name)        
    </div>

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

Main View:

@(Html.Kendo().Window().Name("dialog")
    .Title("Dialog")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Width(300)
    .Events(events => events.Refresh("onRefresh"))
)

<script type="text/javascript">
    function showDialog(id) {
        var wnd = $("#dialog").data("kendoWindow");
        var url = '@Url.Action("ShowDialog", "MyController")'; 

        wnd.refresh(
        {
            url: url,
            data: { id: id}
        });

        wnd.center().open();
    }

    function onRefresh(e) {
        $.validator.unobtrusive.parse($("#dialog"));
        $.validator.setDefaults({
            onkeyup: true,
            onfocusout: true,
            onsubmit: true
        });

        var form = $("#dialog").find('form');
        form.submit(function () {
            if (form.validate().valid()) {
                var wnd = $("#dialog").data("kendoWindow");
                wnd.close();
            }
        });
    }
</script>

Upvotes: 1

Views: 1510

Answers (1)

Sparky
Sparky

Reputation: 98718

Your code is breaking the plugin...

$.validator.setDefaults({
    onkeyup: true,
    onfocusout: true,
    onsubmit: true
});

true is not a valid value for the onkeyup, onfocusout, and onsubmit options. These can only be set to false to disable or a function to over-ride. If you want these options activated, you simply need to leave them out... those are already the defaults.

See documentation...

onkeyup
Type: Boolean or Function()
Validate elements on keyup. As long as the field is not marked as invalid, nothing happens. Otherwise, all rules are checked on each key up event. Set to false to disable. Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value.

onfocusout
Type: Boolean or Function()
Validate elements (except checkboxes/radio buttons) on blur. If nothing is entered, all rules are skipped, except when the field was already marked as invalid. Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value.

onsubmit (default: true)
Type: Boolean
Validate the form on submit. Set to false to use only other events for validation. Set to a Function to decide for yourself when to run validation. A boolean true is not a valid value.

Upvotes: 1

Related Questions