Remote Validation not working in a partial view

Question

Let me describe the layout of my page. There is a splitter on my page, the left page is the navigation panel and the right page is the content. So when the user, clicks a node on the panel, the content will be displayed on the right side. The problem is when the user supply a value on the displayed content, the remote validation is not firing. I tried this when the page is not a partial view and it was working.

Here is script when loading the partial view.

var onPanelItemSelect = function (e) {

    var windowPath;

    windowPath = $(e.item).attr('data-value');

    if (windowPath != '#') {

        $.ajax({
            type: 'GET',
            url: windowPath,
            success: function (data) {
                $('#right_pane').html(data);                                
            }
        });
    }

    return false;
}

@bilalfazlani yup this was the order validate.min.js , validate.unobtrusive.min.js — Ice_Drop, Jan 28 '13 at 06:00

score 0 · Answer 1 · edited May 23 '17 at 11:49

Essentially, I have a feeling that problem could also be that that property names are not bound correctly if you use the same model to bind the main page as well as the partial.

For example if you have a model class (called ModelClass) that has a property each for the two panels (called ModelClass.LeftPanel and ModelClass.RightPanel)

LeftPanel could have a property (TextProperty) that you use to bind to the right partial page. You would expect it to be named 'RightPanel.TextProperty' but it actually ends up with a name 'TextProperty'. This could also impact remote validations.

This Stackoverflow question describes what I think is the problem, as well as various solutions to it.

Hope this helps.

got to look at the article but I think this is not the issue. My left panel and the right panel have unique property name. — Ice_Drop, Jan 28 '13 at 08:25

score 0 · Answer 2 · answered Feb 05 '13 at 08:47

0

Fixed the problem, I'm open if anyone has a better answer. On the header for each view I attach the validate and unobstrusive script.

answered Feb 05 '13 at 08:47

Ice_Drop

452
1
9
19

score 0 · Answer 3 · answered Jun 07 '13 at 13:41

Try this:

change

success: function (data) {
$('#right_pane').html(data);                                
}

to

success: function (data) {
$('#right_pane').html(data);
jQuery.validator.unobtrusive.parse("#right_pane");                                
}

score 0 · Answer 4 · answered Nov 29 '13 at 08:55

0

Please add reference to validate.min.js, and validate.unobtrusive.js in your partial page. Its working for me.

P.S: Am I too late :)

answered Nov 29 '13 at 08:55

Roopali Rawat

96
1
5

score -1 · Answer 5 · answered Apr 01 '13 at 07:40

-1

My article has a descriptive code for remote validation , you can have a look at it .

Remote Validation Article

answered Apr 01 '13 at 07:40

Shalin Jirawla

489
1
5
24

Remote Validation not working in a partial view

5 Answers5